如何在reactjs中按照组件分离的概念构造css文件

我有个问题

我正在做一个用react写的项目。 所有内容都基于react中的组件，因此根据我的理解，包括css文件在内的所有内容都应该在相关组件中定义，如果我们从项目中删除该组件，那么到目前为止，所有相关文件都将被删除

然而，考虑这种情况：

.size{
   font-size:20px;
}

---

正如您所看到的，上面有许多情况可以在不同的组件中使用。因此，我们希望将所有css文件放入相关组件中，然后我们应该在不同的位置复制相同的css定义，或者对于此类场景，我们可以在组件中拥有一个共享文件夹。在react项目中，有没有任何规则或指导方针来正确地构造css文件？

我不确定是否有任何既定的方法来组织共享css，但让我提供一些观察

如果您有导入

App.css

的

App

组件。此应用中使用的任何组件都可以访问

app.css

中的类集合

// app.css
.test {
  color: red;
}

// app.js
import './app.css';
class App extends Component {
  render() {
    return (
      <App>
        <MyComponent />
      </App>
    );
  }
}

// my-component.js
class MyComponent extends Component {
  render() {
    <div className='test'>
      this text is red.
    </div>
  }
}

//app.css
.测试{
颜色：红色；
}
//app.js
导入“/app.css”；
类应用程序扩展组件{
render（）{
返回(
);
}
}
//my-component.js
类MyComponent扩展组件{
render（）{
这个文本是红色的。
}
}

如果在

MyComponent

中导入的css文件的样式与从

App

传递的样式冲突，则

MyComponent

样式将替换该样式的所有使用

---

简而言之，css的位置并不重要。将css放在与组件相同的位置，这正是我们试图让事情井然有序的方式，但最终整个应用程序都可以访问所有css。从示例中我们可以看出，样式的后一种定义取代了早期的定义。

我同意所有组件的可访问性，但结构呢？您是否建议将css定义放在每个组件中，对于常见的组件，将它们放在最近的父组件中？我认为，如果您认为将它们放在父组件中是合理的，那么就这样做。对我来说，做同样的事情是有道理的，但这也是我的偏好。