React-子组件样式表覆盖其他子样式表

Question

我试图通过在不同的组件中导入不同的styleSheets来为每个子组件分别应用styleSheets，但是由于样式被覆盖而无法实现。

示例代码：Stackblitz

childa.jsx：

import React from 'react';
import "./childa.css"

export default () => <h1>Child A!</h1>;

childa.css：

h1 {
  color: blue;
}

childb.jsx：

import React from 'react';
import "./childb.css"

export default () => <h1>Child B!</h1>;

childb.css：

h1 {
  color: red;
}

这只是示例代码。对于styleSheets大的项目，需要解决方案。

Answer 1

根据您对其中一项评论的澄清：

  

问题是我正在将项目从角度转换为反应，所有   CSS已经被编写，所以我不能使用内联样式。有没有   我不必重命名所有CSS类的方式   样式表？

简短回答：您目前还无法实现。

本文介绍了所有不同的 ways to style react components 。对于您而言，最好的方法是使用 css modules ，然后将诸如h1之类的通用类重命名为.h1。

查看有关CSS模块的这篇很棒的文章： Modular CSS with React 。

注意：css modules在create-react-app中不可用。如果您必须使用它，这是一个 how to use CSS Modules with create-react-app 上的文章。

Answer 2

我认为这是由进口订单造成的。 在您的父组件中，您有类似

import React from 'react'
import ChildA from './ChildA'
import ChildB from './ChildB'

这意味着在编译后的代码中，您将导入两个样式表，一个又一个，第二个h1规则将覆盖第一个

您应该为组件使用类，或使用内联样式

Answer 3

导入css不会将其包装在组件范围内，只是直接导入DOM中。为了保持组件样式的分离，您必须采用另一种解决方案，即样式化组件。

Answer 4

这可能不适用于您的整个应用程序，但是我通过将一个类应用于元素（.childA和.childB）来修复了它。这样就解决了问题。

export default () => <h1 className='childB'>Child B!</h1>;