Почему не навешиваются стили на root?

Question

[OliveRrRrr]

Побаловался тут настройкой вебпака и столкнулся с проблемой - стилям присваивается имя по следующей маске

const cssLoaderWithModules = {
    loader: 'css-loader',
    options: {
      modules: {
        localIdentName: isDev ? '[path][name]__[local]' : '[hash:base64:8]',
      },
    },
  }

на все классы стили навешиваются - все хорошо, но на #root нет

import './shared/styles/base.scss' 
html,
body,
#root {
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
} //на body html навешивается - на рут нет



const root = document.getElementById('root')
// root.style.cssText = 'height: 100%' в таком случае на рут повесятся стили
const container = createRoot(root)

container.render(<App />)

Подскажите, пожалуйста, в чем загвоздка?
можно конечно костыльно решить, но хотелось бы понять в чем проблема

Answer 1

[Kentavr16]

Можешь стилизовать index.html - инлайново или в теге скрипт должно сработать. Но стоит понимать что корневой компонент приложения - это не про стили и отображение. Это про точку рендеринга, скорее логику. Потому советую его вообще не трогать. Точно так же ширину в сто процентов можно задать основному компоненту, в который ты собираешь приложение (App)

Comments

[OliveRrRrr]

Kentavr16 Вот инлайново или через скрипт или body > div не хотелось бы, я это и имел ввиду под костылями, хочется понять почему не вешаются стили

В корневой запихнул для наглядности, чтобы показать что рут есть, в него монтируется, но стили не навешиваются

[Kentavr16]

OliveRrRrr, Вопрос чисто для саморазвития? Не могу представить зачем стилизовать корневой элемент.

[OliveRrRrr]

Kentavr16, да, ну и допустим хотелось бы, чтобы он был на всю высоту родителя - body