React中如何将模块全局样式限定仅作用于单个组件？

完全可以实现，针对你使用react-multi-carousel的场景，以下几种方案都可以做到样式只作用于目标轮播实例，不污染全局其他同组件：

方案1：父级命名空间隔离（通用无依赖，适配所有项目） #

这是最不需要改项目配置、兼容性最好的方案：

• 给你需要单独改样式的那个轮播组件外层套一个自定义类名的容器，比如类名设为target-carousel-wrap
• 写覆盖样式时，带上父类选择器做限定，不要直接写裸的全局类选择器：

.target-carousel-wrap .react-multi-carousel-item {
  width: 310px !important;
}

只要其他位置的轮播组件外层没有加同名的target-carousel-wrap类，这段样式就完全不会影响其他实例。如果你的项目用了CSS Modules，父类名会被自动编译成哈希值，连类名冲突的可能性都没有。

方案2：CSS Modules 局部穿透（适配已启用CSS Modules的项目） #

如果你当前写样式的文件是*.module.css这类CSS Modules文件，本身文件内的样式默认就是局部作用域的，只需要用:global()语法包裹第三方组件的全局类名即可，不需要额外套父容器也能实现单文件生效：

/* 以下样式写在当前轮播组件对应的module.css文件中，仅在该组件被渲染时生效 */
:global(.react-multi-carousel-item) {
  width: 310px !important;
}

CSS Modules不会改写:global()包裹的类名，但这段样式本身只会跟随当前组件的引入加载，只要你不在其他组件文件里引入这个module样式文件，就不会产生全局污染。

方案3：利用组件自带Props传自定义类名（最干净无副作用） #

react-multi-carousel本身支持传入itemClass自定义属性，会给当前实例下的所有轮播项加上你指定的自定义类名，从根源上不需要选中组件默认的全局类：

// 仅给你需要修改的那个轮播实例传该属性
<Carousel
  itemClass="custom-width-carousel-item"
  // 其余原有配置项不变
>
  {/* 轮播项内容 */}
</Carousel>

对应样式直接写自定义类的规则即可：

.custom-width-carousel-item {
  width: 310px !important;
}

这个方案隔离性最好，自定义类只会出现在你传了Props的那个轮播实例的DOM上，其他位置的同组件完全不会匹配到这个选择器，没有任何污染风险。

注意：不要直接在项目入口引入的全局CSS文件里写裸的.react-multi-carousel-item选择器，这类规则一旦加载会匹配整个项目所有同名元素，必然影响其他位置的组件样式。

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