logoAnt Design X

设计研发组件X MarkdownX SDK演示国内镜像
  • Ant Design X
  • 更新日志
    v2.2.0
  • 模型接入
    • OpenAI
      Updated
    • 通义千问
      Updated
  • 智能体接入
    • 百宝箱
      Updated
  • 如何使用
    • 在 create-react-app 中使用
    • 在 Vite 中使用
    • 在 Next.js 中使用
    • 在 Umi 中使用
    • 在 Rsbuild 中使用
  • 进阶使用
    • 样式兼容
    • 通用属性
  • 迁移
    • 从 v1 到 v2
      New
  • 其他
    • 贡献指南
    • FAQ

样式兼容

loading

@layer 样式优先级降权

  • 支持版本：>=5.17.0
  • MDN 文档：@layer
  • 浏览器兼容性：caniuse
  • Chrome 最低支持版本：99
  • 默认启用：否

Ant Design X 支持配置 layer 进行统一降权。经过降权后，antdx 的样式将始终低于默认的 CSS 选择器优先级，以便于用户进行样式覆盖（请务必注意检查 @layer 浏览器兼容性）。StyleProvider 开启 layer 时，子元素必须包裹 XProvider 以更新图标相关样式：

tsx
import { StyleProvider } from '@ant-design/cssinjs';
import { XProvider } from '@ant-design/x';


export default () => (
  <StyleProvider layer>
    <XProvider>
      <Bubble />
    </XProvider>
  </StyleProvider>
);

antd 和 antdx 的样式会被封装在 @layer 中，以降低优先级：

diff
++  @layer antd {
      :where(.css-cUMgo0).ant-btn {
        color: #fff;
      }
++  }
++  @layer antdx {
      :where(.css-bAMboO).ant-sender {
        width: 100%;
      }
++  }

使用时需要手动调整 @layer 来控制样式的覆盖顺序

css
@layer antd, antdx;

TailwindCSS v3

在 global.css 中，调整 @layer 来控制样式的覆盖顺序。让 tailwind-base 置于 antd, antdx 之前：

css
@layer tailwind-base, antd, antdx;


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

TailwindCSS v4

在 global.css 中，调整 @layer 来控制样式的覆盖顺序，让 antd, antdx 置于恰当位置：

css
@layer theme, base, antd, antdx, components, utilities;


@import 'tailwindcss';

更多可以参考 antd 样式兼容。