Question

我的“主要”组件中有以下render：

import ComponentA from './component-a.js'; 
import ComponentB from './component-b.js'; 
const App = React.createClass({
    render: function() {
        return (
            <div>
                <ComponentA/>
                <ComponentB/>
            </div>
        );
    }
});

ComponentA需要css个文件。所以我在component-a.js中有以下内容：

require ('./component-a.css');
const ComponentA = React.createClass({
    render: function() {
        return (
            <div>component a</div>
        );
    }
});

......而ComponentB没有。所以我在component-b.js中有以下内容：

const ComponentB = React.createClass({
    render: function() {
        return (
            <div>component b</div>
        );
    }
});

css（仅限）所需的ComponentA文件为：

div {
    width: 100px;
    height: 30px;
    border: 1px solid red;
}

即使只有ComponentA需要css，ComponentB也会受到影响。这是在浏览器中呈现的内容：

似乎页面中的所有div元素都受ComponentA所需样式的影响。其中包括后续组件div的{{1}}（不需要ComponentB样式）以及包含{css的{{1}} 1}}和div以及由React添加的另一个ComponentA：

ComponentB个文件不仅仅影响需要它们的组件吗？如果没有，并且它们实际上是全局有效的，那么从特定组件中要求div文件的语义到底是什么？
除了使用内联样式并将所有内容放在JS代码中之外，有没有办法划分CSS文件以便它们只影响需要它们的React组件？如果要使用类名来实现这种效果，则无法保证当组件与其他组件一起使用时，类名称将是唯一的。

Answer 1

CSS仍然会加载到浏览器中以影响整个页面。导入css文件只是为了模块化你的css和你的js，这样当你最大限度地使用你的模块加载器时，你不仅没有加载不必要的js，你也没有加载不必要的css。

编辑：关于Instagram如何使用模块加载的视频：
https://www.youtube.com/watch?v=VkTCL6Nqm6Y&noredirect=1

您的最佳解决方案仍然是命名您的CSS。关于冲突问题，您可以使用比我在下面使用的更详细的类名，如mjb-appname-componentname

让你的ComonentA渲染：

render: function() {
    return (
        <div className="component-a">component a</div>
    );
}

及其css文件为

.component-a div {
    width: 100px;
    height: 30px;
    border: 1px solid red;
}

最好使用css预处理器，如less或sass

.component-a {
    div {
        width: 100px;
        height: 30px;
        border: 1px solid red;
    }
}

额外：

关于js中的内联样式的有趣讨论：http://blog.vjeux.com/2014/javascript/react-css-in-js-nationjs.html

讨论使用此内联样式方法引发的问题：

https://github.com/callemall/material-ui/issues/4066

React组件中的require css也会影响其他组件

1 个答案: