logoAnt Design X

DesignDevelopmentComponentsX MarkdownX SDKPlayground
  • Ant Design X
  • Changelog
    v2.1.3
  • Model Integration
    • OpenAI
      Updated
    • Qwen
      Updated
  • Agent Integration
    • Tbox
      Updated
  • Basic Usage
    • Usage with create-react-app
    • Usage with Vite
    • Usage with Next.js
    • Usage with Umi
    • Usage with Rsbuild
  • Advanced Usage
    • Style Compatibility
    • Common Props
  • Migration
    • From v1 to v2
      New
  • Other
    • Contributing
    • FAQ

Style Compatibility

loading

@layer Style Priority Demotion

  • Supported version: >=5.17.0
  • MDN documentation: @layer
  • Browser compatibility: caniuse
  • Minimum Chrome support version: 99
  • Enabled by default: No

Ant Design X supports configuring layer for unified priority demotion. After demotion, antdx styles will always have lower priority than default CSS selectors, making it easier for users to override styles (please be sure to check @layer browser compatibility). When StyleProvider enables layer, child elements must be wrapped with XProvider to update icon-related styles:

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


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

antd and antdx styles will be encapsulated in @layer to reduce priority:

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

When using, you need to manually adjust @layer to control the style override order:

css
@layer antd, antdx;

TailwindCSS v3

In global.css, adjust @layer to control the style override order. Place tailwind-base before antd and antdx:

css
@layer tailwind-base, antd, antdx;


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

TailwindCSS v4

In global.css, adjust @layer to control the style override order, placing antd and antdx in appropriate positions:

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


@import 'tailwindcss';

For more information, please refer to antd Style Compatibility.