tailwind css在antd组件中使用不生效

场景描述

最近搭建了一个nextjs项目，使用了[email protected]作为ui库，在某些场景下我需要修改antd组件的部分样式不能影响全局的组件样式，但是使用时发现tailwind css样式不生效，比如：

tsx 复制代码

import { Button } from "antd";
import React from "react";

const Test = () => {
  return (
    <div className="c-flex mt-6">
      <Button
        type="primary"
        className="bg-red-500"
      >
        antd按钮
      </Button>
    </div>
  );
};

export default Test;

可以看到按钮的背景颜色并没有被改变，当时想到应该是样式权重的问题，有没有什么办法能更好的去解决这个样式权重的问题呢？答案是有的

1.使用 "!" 增加tailwind css的样式权重

html 复制代码

<Button type="primary" className="!bg-red-500"> antd按钮 </Button>

确实可以解决，但是如果其他地方也需要覆盖antd组件的样式呢，很明显这种方案不太推荐。

2.在tailwind.config.js中配置important为true

js 复制代码

/** @type {import('tailwindcss').Config} */
export default {
    important: true,
    darkMode: ["class"],
    content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./index.html",
  ],
  theme: {}
  },
}

这样相当于项目中所有用了tailwind权重的css样式末尾都会加上!important关键词,确实解决方案1不能复用的问题了，但是又出现新问题，tailwind权重太大了，我只是想要修改antd组件的样式而已。

3.降低antd样式权重（相当于提高tailwind css的权重）

antd官方又提供一种降级兼容方案，但是antd版本要>=5.0.0，以下是代码的配置：

tsx 复制代码

// ./src/app/layout.tsx
import React from "react";
import "./global.css";
import "@ant-design/v5-patch-for-react-19";
import { Providers } from "@/components/BodyProviders";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html>
      <body>
        <Providers>
           {children}
        </Providers>
      </body>
    </html>
  );
}

这里看到我还引入了一个@ant-design/v5-patch-for-react-19依赖，这主要是由于 React 19 调整了 react-dom 的导出方式，导致 antd 无法直接使用 ReactDOM.render 方法，会导致antd组件会出现一些问题，控制台也会报error的错误，据说国内的很多ui组件之前版本都不兼容React 19。

tsx 复制代码

// Providers.tsx
"use client";
import { PropsWithChildren } from "react";
import { StyleProvider } from "@ant-design/cssinjs";
import { ConfigProvider } from "antd";
import locale from "antd/locale/zh_CN";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";

dayjs.locale("zh-cn");

export function Providers({ children }: PropsWithChildren) {
  return (
    <StyleProvider layer>
      <ConfigProvider locale={locale}>{children}</ConfigProvider>
    </StyleProvider>
  );
}

最后一步在global.csss使用## @layer 样式优先级降权

css 复制代码

@layer tailwind-base, antd;
@layer tailwind-base {
  @tailwind base;
}
@tailwind components;
@tailwind utilities;

然后就能发现使用<Button type="primary" className="bg-red-500"> antd按钮 </Button>就能自定义覆盖antd组件的样式了。

尾声

至此我们已经完成了，这是我在实际项目中遇到的问题并通过这个案例来系统地思考过程中遇到的问题与优化点，以及解决的思路，也许还有更好的实现方案，欢迎指出！