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

Question

我对 React 组件相互交互的方式有疑问。我的问题是：假设我有一个名为 About.js 的子组件，我也有一些 sass 样式让我们说 about.scss，在我的关于组件中我做了一个 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>
);

Importing styles for react components inherited?