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>;

child.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>;