logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.4
  • Ant Design of React
  • Changelog
    v5.25.4
  • Basic Usage
    • Getting Started
    • Usage with Vite
    • Usage with Next.js
      Updated
    • Usage with Umi
    • Usage with Rsbuild
    • Usage with Farm
    • Usage with Refine
  • Advanced
    • Customize Theme
    • CSS Compatible
    • Server Side Rendering
    • CSS Variables
      New
    • Use custom date library
    • Internationalization
    • Common Props
    • React 19 Compatibility
      New
  • Migration
    • V4 to V5
    • Less variables to Component Token
  • Other
    • Third-Party Libraries
    • Contributing
    • FAQ
When to Use
Quick Start
Advanced
Disable Hash
Customize Theme
API

CSS Variables

contributors
  • Server Side RenderingUse custom date library

    Resources

    Ant Design X
    Ant Design Charts
    Ant Design Pro
    Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Web3
    Ant Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Ant Design
    Medium
    Twitter
    yuque logoAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconf logoSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTech logoMore Products

    yuque logoYuQue-Document Collaboration Platform
    AntV logoAntV-Data Visualization
    Egg logoEgg-Enterprise Node.js Framework
    Kitchen logoKitchen-Sketch Toolkit
    Galacean logoGalacean-Interactive Graphics Solution
    xtech logoAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community

    Since 5.12.0, Ant Design 5.x enabled CSS variables again. Unlike 4.x, this time we have integrated the capabilities of CSS-in-JS, and all Design Tokens have been included in the management scope of CSS variables.

    Currently, the CSS variable mode has been globally enabled on the official website.

    When to Use

    CSS variable mode brings two important improvements to Ant Design's styling capabilities:

    1. The styles of the same component under different themes can be shared, reducing the total size of the styles
    2. When switching themes, there is no need to re-serialize the styles, which improves the performance of theme switching

    Therefore, if your application depends on Ant Design's theme capabilities, we strongly recommend that you enable the CSS variable mode.

    Quick Start

    To enable CSS variable mode, use the cssVar configuration in the theme property of ConfigProvider. This configuration will be inherited, so if you want to enable CSS variable mode globally, you only need to configure it in the root of your application.

    WARNING

    CSS variable mode requires a unique key for each theme to ensure style isolation. In React 18, we use useId to generate unique keys by default, so you don't have to worry about this issue in React 18. But in React 17 or 16, you need to manually set a unique key for each theme, otherwise the themes will be mixed up.

    tsx
    // React 18
    <ConfigProvider theme={{ cssVar: true }}>
    <App />
    </ConfigProvider>
    // React 17 or 16
    <ConfigProvider theme={{ cssVar: { key: 'app' } }}>
    <App />
    </ConfigProvider>

    After enabling it, you can see that some specific values in the antd component styles have been replaced with CSS variables:

    image

    Advanced

    Disable Hash

    Hash is one of the features since Ant Design 5.0. Its function is to calculate a unique hash value for each theme, and use it in the class of the component to isolate the theme style.

    However, after enabling CSS variables, the component styles of the same antd version will not change with the token —— because we use CSS variables to fill in the dynamic parts of the styles. So if there is only one version of antd in your application, you can choose to disable hash to further reduce the total size of the styles:

    tsx
    <ConfigProvider theme={{ cssVar: true, hashed: false }}>
    <App />
    </ConfigProvider>

    By the way, we strongly recommend using extractStyle to extract static styles, which will bring a certain amount of performance improvement to the application.

    Customize Theme

    With CSS variable mode, the method of modifying the theme is the same as before, refer to Customize Theme.

    API

    cssVar configuration:

    PropertiesDescriptionTypeDefaultVersion
    prefixPrefix of CSS Variables, same as prefixCls of ConfigProvider by defaultstringant5.12.0
    keyThe unique key of theme. Automatically set by useId in React 18, but need to be set manually in React 17 or 16stringuseId in React 185.12.0