如何仅使用TailwindCSS覆盖第三方React组件中的默认样式（如shadow-sm）

别发愁，这种第三方组件样式“不听话”的情况我碰过好多次了，用Tailwind 3+的**任意变体（Arbitrary Variants）**就能完美解决，全程不用改组件源码，也不用写额外的自定义CSS，纯用Tailwind的语法搞定。

最简单的解决方案：用任意变体直接穿透覆盖 #

Tailwind 3.1+支持在className里直接写自定义的CSS选择器作为变体，你只需要在使用第三方组件时，给它加一个带任意选择器的类，就能精准命中内部的shadow-sm元素，把它替换成shadow-none：

<LibraryComponent className="[&_div.shadow-sm]:shadow-none" />

这个写法的原理：

• [&_div.shadow-sm] 是Tailwind的任意变体语法：
  • & 代表当前组件的根元素（也就是LibraryComponent最外层的div）
  • _ 是Tailwind里用来代替CSS空格的符号
  • 整个选择器翻译成CSS就是：.your-component-class div.shadow-sm
• 后面的:shadow-none 就是给命中的元素应用无阴影的样式，因为这个选择器的特异性比原有的.shadow-sm更高，所以会直接覆盖默认的阴影样式。

如果需要覆盖多个默认阴影（比如你提到的内部shadow-lg） #

只要在同一个className里追加对应的任意变体就行：

<LibraryComponent className="[&_div.shadow-sm]:shadow-none [&_div.shadow-lg]:shadow-none" />

更精准的命中（可选） #

如果不想全局覆盖组件内所有的shadow-sm，只想针对grid里的那几个item，可以把选择器写得更具体：

<LibraryComponent className="[&_div.grid>div.shadow-sm]:shadow-none" />

这个选择器只会命中组件内grid类元素的直接子级里带shadow-sm的div，不会影响其他位置的元素。

旧版Tailwind的兼容方案（可选） #

如果你的Tailwind版本低于3.1，也可以在tailwind.config.js里自定义一个变体（需要改配置，但依然不用写额外CSS）：

// tailwind.config.js
module.exports = {
  plugins: [
    function({ addVariant }) {
      // 自定义一个变体，用来命中内部带shadow-sm的div
      addVariant('clear-child-shadows', '& div.shadow-sm');
    }
  ]
}

然后使用时：

<LibraryComponent className="clear-child-shadows:shadow-none" />

验证效果 #

你可以打开浏览器的开发者工具，找到原来带shadow-sm的div，会看到它的box-shadow样式已经被shadow-none的box-shadow: none覆盖，完全符合你的需求。

内容来源于stack exchange