Для ответа на ваш вопрос мне необходима дополнительная информация о том, как именно вы настраивали модуль загрузчика стилей в вашем вебпак конфиге. Однако, я могу предположить, что если у вас настроена изоляция стилей через CSS Modules или подобный механизм, то глобальные стили (как например для элемента с id="root") могут не применяться, поскольку CSS Modules генерируют локальные имена классов, чтобы избежать конфликтов стилей.
В случае использования CSS Modules, чтобы применить стиль к элементу с id, необходимо использовать глобальные стили. Вот пример, как это можно сделать с CSS Modules:
```css
/* styles.module.css */
/* локальные стили */
.example {
color: green;
}
/* глобальные стили */
:global(#root) {
background-color: blue;
}
```
```javascript
// ваш js-файл, где вы импортируете стили
import React from 'react';
import styles from './styles.module.css';
function App() {
return (
<div id="root" className={styles.example}>
Hello, World!
</div>
);
}
export default App;
```
Если вы настроили вебпак таким образом, что все стили подвергаются модульной обработке, тогда вам потребуется объявлять некоторые из них как глобальные, чтобы они применились к элементам вне контекста локальных модулей.
Также, если у вас настроено исключение для некоторых файлов, чтобы стили из них не обрабатывались как локальные модули (например, все файлы, названия которых заканчиваются на `.global.css`), убедитесь, что вы следуете этой номенклатуре именования файлов и правильно импортируете их.
Если данное предположение о вашей проблеме неверно, то предоставьте, пожалуйста, больше информации о вашем конфиге вебпака, файле со стилями и том, как вы добавляете стили в ваш React компонент. Это поможет мне предоставить более точное решение.