Why do styles from one component pass into others?

Question

React

I'm making a simple React app using create-react-app
I'm currently working with routing
I wrote the following in 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'));

I created about.js and imported about.css into it.
In the about.css file, I set a red background for the body and now the problem is that in the App component, the background is red in the same way.
What is the reason for this? Global styles?

Answer 1

Certainly global. You have one body tag for the entire page. Wherever you set new styles for it, it will affect the entire project. The same goes for your div where you mount your application.