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

For more detailed information, please refer to antd Style Compatibility.

@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%;
      }
++  }