解决@ant-design/icons导致的样式异常

FanetheDivine2025-07-15 16:44

在使用antd+tailwind时通常会使用layer模式

js 复制代码

    <StyleProvider layer>
      <ConfigProvider locale={zhCN}>
        <App className='w-full h-full relative m-0 p-0'>
          {useRoutes(router)}
        </App>
      </ConfigProvider>
    </StyleProvider>

css 复制代码

@layer theme, base, antd, components, utilities;
@import 'tailwindcss';

此时layer的顺序会非常重要决定了样式的覆盖情况

但是某些情况下 icons会造成layer顺序异常

原因在于一开始 icon组件没有接收到StyleProvider注入的layer 它会在<head>顶部插入样式

html 复制代码

<style data-rc-order="prepend" rc-util-key="@ant-design-icons">
.anticon{
xxx

一般情况下如果有icon接受到layer 会注入@layer antd开头的样式并插入<head>末尾 ;但是在已经存在head>style[rc-util-key="@ant-design-icons"]的情况下会复用这个节点只修改其内容

因此这个style会被改为

html 复制代码

<style data-rc-order="prepend" rc-util-key="@ant-design-icons">
@layer antd {xxx

它是<head>的第一个元素让@layer antd的定义比其他layer更早使其优先级降低

解决方法

使用@ant-design/icons^5 使其与antd版本匹配参考文档
不要从antd导入message等函数式组件而是使用App.useApp
如果你的项目和我一样在axios的拦截器里用了message 也没关系可以这样做

js 复制代码

    <StyleProvider layer>
      <ConfigProvider locale={zhCN}>
        <App className='w-full h-full relative m-0 p-0'>
          {useRoutes(router)}
          <RightOutlined className='hidden' />
        </App>
      </ConfigProvider>
    </StyleProvider>

提前把可能引发错误的style节点固定在head末尾