减少样式以响应组件

Question

我试图弄清楚如何让我的React组件不占用另一个React组件的CSS类。 可以这么说，我有一个名为Home的组件，一个名为About的组件，并且在内部，它们都只包含一个div，其头文件容器的className为：

家：

import React, { Component } from 'react';

import './home.less';

class Home extends Component {
    render() {
        return (
            <div className='header-container'>
                <h1>Home</h1>
            </div>
        );
    }
}

export default Home;

关于：

import React, { Component } from 'react';

import './about.less';

class About extends Component {
    render() {
        return (
            <div className='header-container'>
                <h1>About</h1>
            </div>
        );
    }
}

export default About;

每个文件的较少文件看起来都具有不同的颜色（对于本示例，可以说这是about.less文件）：

.header-container {
    color: red;
}

现在，当我使用react-router-dom并尝试导航到主页时，我看到的是Home字样，但文件中的红色大约是红色，而不是home.less文件中的蓝色。

这就是我导航到组件的方式

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';

import Home from './home/home';
import About from './about/about';

class App extends Component {
    render() {
        return (
            <Router>
                <Switch>
                    <Route exact path='/' component={Home}/>
                    <Route path='/about' component={About}/>
                </Switch>
            </Router>
        );
    }
}

export default App;

有人对我如何分开这些建议不互相影响有任何建议吗？ 不确定是否有帮助，但是当我看到此消息时，我正在运行webpack-dev-server来提供文件。

编辑：当我检查加载页面上的元素时，我也注意到，我在head元素中看到以下CSS。

Answer 1

如果要在同一个应用程序中，并且要使用外部样式表，建议对两个div命名。

例如<div className='about-page__header-container'> <div className='home-page__header-container'>

这是因为作为样式表导入的css样式是全局的。

一种替代方法是使用内联样式，该样式在React.js社区中越来越流行。

有关两个选项的比较，请参见“我们是否还需要CSS？”周围的辩论。