Question

我试图弄清楚如何让我的反应组件不要拿起另一个反应组件的css类。所以说我有一个名为Home的组件和一个名为About的组件，在内部它们都只包含一个带有className为header-container的div，而它们的导入较少，如下所示：

主页：

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这个词，但是红色是在较少的文件中，而不是我家中的蓝色。文件。

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

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来提供文件。

编辑：另外我注意到当我检查加载页面上的元素时，我在头部元素中看到了以下css。

Answer 1

如果它将在同一个应用程序中并且您想要使用外部样式表，则建议您以不同方式命名两个div。

e.g。 <div className='about-page__header-container'> <div className='home-page__header-container'>

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

另一种选择是使用内联样式，这在React.js社区越来越受欢迎。

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

隔离较少的样式以反应组件

1 个答案: