如何在React应用CSS中覆盖第三方库组件的样式？

我在React组件中使用了第三方alert组件，代码如下：

export function MyComponent() {
  return (
     <div className={styles.alert}>
       <ModusAlert message={'提示内容'}></ModusAlert>
     </div>
  );
}

对应的MyComponent.module.css文件内容：

.alert {
  width: 390px;
  margin-top: 182px;
  margin-bottom: 22px;
}

我需要修改alert组件内部的文字颜色、背景色等样式。在开发者工具中查看alert内部标签的样式为：

div.alert .message {
    font-size: 0.875rem;
    font-weight: 700;
}

在开发者工具里给这段样式添加color: white后页面外观会变化，但将修改后的样式写入我的组件CSS文件时却无法生效。

问题出在CSS Modules的作用域机制：它会给本地类名添加唯一哈希后缀（比如.alert会被编译成.alert_xxx123），你写的div.alert .message编译后会变成div.alert_xxx123 .message，但第三方组件内部的.message类并没有被CSS Modules处理，导致选择器无法匹配。

有几种可行的解决方式：

方法1：用:global()取消作用域 #

在CSS Modules中，用:global()包裹需要全局生效的选择器，避免类名被添加哈希：

.alert {
  width: 390px;
  margin-top: 182px;
  margin-bottom: 22px;
}

/* 让.alert .message不受CSS Modules作用域限制 */
:global(.alert .message) {
    font-size: 0.875rem;
    font-weight: 700;
    color: white;
}

也可以更精准地只取消.message的作用域：

.alert :global(.message) {
    font-size: 0.875rem;
    font-weight: 700;
    color: white;
}

方法2：使用深度选择器穿透作用域 #

如果使用Vite、Create React App等打包工具，可通过深度选择器穿透CSS Modules的作用域：

/* 语法1 */
.alert ::v-deep .message {
    font-size: 0.875rem;
    font-weight: 700;
    color: white;
}

/* 语法2 */
.alert :deep(.message) {
    font-size: 0.875rem;
    font-weight: 700;
    color: white;
}

不同工具支持的语法可能有差异，旧版本工具可能需要用/deep/代替。

方法3：优先使用组件自带的样式API #

先查看ModusAlert组件的文档，很多第三方组件会提供textColor、bgColor这类props直接配置样式，这种方式比覆盖CSS更优雅。

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