Question

考虑一个简单的React应用程序：

src/
  component/
    App.css
    App.js
    MyComponent.css
    MyComponent.js
  index.js

据我了解，React将样式表（通过import './MyComponent.css'导入时）以<style type="text/css">...</style>的形式添加到DOM中。

为避免与其他样式冲突（当将应用程序作为插件模块添加到网站时），样式应添加前缀：

// App.js
import './App.css';    
import MyComponent from './MyComponent';

class App extends Component {
    render() {
        return (
            <div className="my-app">
                <MyComponent/>
            </div>
        );
    }
}

// App.css
.my-app {
    ...
}

// MyComponent.js
import './MyComponent.css';

class MyComponentextends Component {
    render() {
        return (
            <div className="my-component">
                My Component
            </div>
        );
    }
}

// MyComponent.css
.my-app .my-component {
    ...
}

与my-component发生碰撞的可能性不是很高，但是像pagination，comment，product等图像分量。

我的问题是：将样式添加到单独的样式表文件（MyComponent.css）时，无论如何必须根据应用程序（.my-app前缀）定义样式，有什么意义？最好将所有样式放入应用程序的样式表中，就像这样：

// App.css
.my-app { ... }
.my-app .my-component { ... }

还是有一种方法可以自动防止碰撞（可能是通过打包）？

React中的样式表组织

0 个答案: