Question

所以我正在使用React，webpack-serve和less-loader，我有2个非常简单的页面，它们加载了不同的样式文件：

import React from 'react';
import { withRouter } from 'react-router-dom';

import 'less/index.less';

class IndexPage extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (<div>qqwdqddddeeewd</div>)
    }
};

export default withRouter(IndexPage);

两个页面都导入不同的文件，但是当从第一页切换到第二页时，第一页的样式仍然保留在第二页中。（import在页面中创建<style></style>

我可以做些什么来避免这种情况？如何让第二页只有其导入的样式？

Answer 1

您可以使用内联样式https://reactjs.org/docs/faq-styling.html。但是根据React Doc CSS classes are generally more efficient than inline styles.

因此，您可以在每个组件的包装器中使用嵌套和样式。

class IndexPage extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (<div id="index">qqwdqddddeeewd</div>)
    }
};

然后在你的index.less

中

#index {
// style here for index page elements
}

最后导入的样式仍存在于下一个React路径中

1 个答案: