Почему стили из одного компонента переходят в другие?

Question

[sergemin]

Делаю простое приложение на React, использую create-react-app
В данный момент работаю с роутингом

В index.js написал следующее:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { HashRouter, Route, } from 'react-router-dom';
import About from './components/about/about';

const mainStore = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());


ReactDOM.render(
    <Provider store={mainStore}>
        <HashRouter>
            <div>
                <Route exact path="/" component={App} />
                <Route path="/about/" component={About} />
            </div>
        </HashRouter>
    </Provider>,
    document.getElementById('root'));

Создал about.js и заимпортил в него about.css
В файле about.css задал для body красный background и теперь проблема в том, что в компоненте App точно так же background красный

С чем это связано? Глобальные стили?

Answer 1

[Максим]

Конечно глобальные. У вас один тэг body на всю страницу. Где бы вы не задали ему новые стили - это коснется всего проекта. Тоже самое касается и вашего div'a куда вы монтируете свое приложение.

Comments

[sergemin]

А можно настроить так, чтобы стили вставлялись не инлайново и файлом. Читал документацию по webpack, но с create-react-app не пойму как это сделать. Я сначала думал, что замысел такой, что каждый роут как отдельная страница и ему присваивается свой css

[Максим]

sergemin, у вас есть html страница, на которой присутствует тэг body, потом внутри что-нибудь еще и ваш div куда вы монтируете приложение.
Внутри этого div'a можете делать любые шаблоны для разных роутов. Если див родительский занимает всю страницу - вот вам и рецепт - как сделать разное оформление для всей страницы по разным роутам. При этом css будет общий, просто разные классы используйте.
Если хотите использовать одинаковые названия классов, но при этом, чтобы не было конфликтов - используйте css modules (не работал с ними подробно, подсказать особо не могу, меня устраивают обычные классы и общий css на все приложение).

[sergemin]

Максим, спасибо! Как всегда, проясняете мне ситуацию все больше и и больше!