javascript - 隔离较少的样式以响应组件

Question

我想弄清楚如何让我的 React 组件不获取另一个 React 组件的 css 类。假设我有一个名为 Home 的组件和一个名为 About 的组件，在内部它们都只包含一个类名为 header-container 的 div 和它们的 less 导入，如下所示:

首页:

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;

每个 less 文件看起来都是这样，颜色不同(对于这个例子，假设这是 about.less 文件):

.header-container {
    color: red;
}

现在，当我使用 react-router-dom 并尝试导航到主页时，我看到了 Home 这个词，但是在 about less 文件中是红色的，而不是我 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 中变得越来越流行。社区。

有关两个选项的比较，请参阅 The Debate Around "Do We Even Need CSS Anymore?"