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

【问题标题】：Importing styles for react components inherited?为继承的反应组件导入样式？
【发布时间】：2018-11-09 21:20:29
【问题描述】：

我对 React 组件之间的交互方式有疑问。我的问题是这样的：假设我有一个名为 About.js 的子组件，并且我还有一些 sass 样式让我们说 about.scss，在我的 about 组件中我做了一个 require(./about.scss) 并导入我需要的样式对于我的组件。

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

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

谢谢！

【问题讨论】：

【解决方案1】：

是的，当你从你的 React 文件中导入你的 SCSS 文件时，webpack 所做的就是把你的 SCSS 文件转换成 CSS 文件，然后用 style 标签包装内容并将其注入到你的页面中，所以在最终，您的 DOM 将如下所示：

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

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

大多数 React 开发人员更喜欢使用内联样式来设置组件样式

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

【讨论】：