继承了反应组件的导入样式？

Question

我对反应组件彼此交互的方式有疑问。我的问题是这样的：说我有一个名为About.js的子组件，我也有一些sass样式可以说about.scss，在我的about组件中我做了一个require（./ about.scss）并导入我需要的样式对于我的组件。

当我在父组件中渲染时，about.scss样式是否与parent.scss文件中存在的样式冲突？

设计单个组件和设置文件结构的最佳方法是什么？

谢谢！

Answer 1

是的，当您从React文件导入SCSS文件时，webpack会做什么，它会将您的SCSS文件转换为CSS文件，并使用样式标记包装内容并将其注入您的页面，因此，当天结束时，您的DOM将如下所示：

<style>
// parent.css
.conflict{
  background: skyblue;
}
</style>

<style>
// about.css
.conflict{
  background: hotpink;
}
</style>

大多数React开发人员更喜欢使用内联样式

来构建组件的方法

const App () => (
  <div
    style={{
      background: 'skyblue',
    }}
  >
  </div>
);