每个React组件是否需配备独立Stylesheet？React新手技术咨询

嘿，这个问题绝对是React新手入门时的高频困惑，我当初学的时候也纠结过好一阵子，来跟你掰扯掰扯两种方案的优劣和适用场景～

两种方案的对比 #

1. 集中式样式（在App组件引入全局CSS） #

这种方式就是把所有样式都塞进一个（或少数几个）CSS文件里，然后在App.js或者项目入口文件里统一引入。

• 优点：上手零门槛，适合刚入门的练手小项目。比如你写个Todo List demo，直接把所有按钮、列表、输入框的样式都丢进App.css，不用为每个组件单独建样式文件，开发速度贼快。
• 缺点：项目一变大就拉胯。样式代码会越来越臃肿，很容易出现类名冲突（比如两个组件都用了.card类，后面的样式会覆盖前面的），后期找某个组件的样式要在几百行代码里翻，维护成本直线上升。

2. 组件独立样式（每个组件配单独的CSS文件） #

这是React社区更推荐的模块化做法，每个组件对应自己的样式文件，比如Header.js配Header.css（或者用CSS Modules的Header.module.css），组件里只引入自己的样式。

• 优点：完全契合React的组件化思想，样式和组件逻辑绑定在一起，找起来特别方便。而且用CSS Modules、Styled Components这类方案还能彻底解决样式冲突问题——比如CSS Modules会自动给类名加随机哈希后缀，像Header__title_abc123，根本不会和其他组件的类名撞车。后期维护的时候，改某个组件的样式不用怕影响其他组件，安全感拉满。
• 缺点：初期会多建一些文件，对新手来说可能有点繁琐，但习惯之后真的会觉得很舒服。另外全局通用样式（比如浏览器重置样式、主题色变量）还是需要单独的全局CSS文件来存放，在入口文件统一引入就行。

给你的具体建议 #

• 如果只是练手小项目/ demo：选集中式样式就好，不用折腾复杂配置，先把React的核心逻辑搞明白再说。
• 如果是中大型项目：一定要用组件独立样式，配合CSS Modules（Create React App默认支持）或者Styled Components这类工具，能大大提升代码的可维护性。

其实现在React社区的主流做法就是样式隔离，毕竟组件化就是要让每个模块独立、可复用，样式跟着组件走才是最合理的～

内容的提问来源于stack exchange，提问作者user6514554