vike-react-antd

vike-react-antd

Integrates Ant Design into your vike-react app.

Installation
Settings
Version history
What it does
See also

Installation

• npm install vike-react-antd antd @ant-design/cssinjs
• Extend +config.js:

  // pages/+config.js
  
  import vikeReact from "vike-react/config"
  import vikeReactAntd from "vike-react-antd/config"
  
  export default {
    // ...
    extends: [vikeReact, vikeReactAntd]
  }
  

• You can now use Ant Design in any of your components.

  import { Button, Flex } from "antd";
  
  function SomeComponent() {
    return (
      <Flex gap="small" wrap>
       <Button type="primary">Primary Button</Button>
       <Button>Default Button</Button>
     </Flex>
    )
  }
  

[!NOTE] The vike-react-antd extension requires vike-react.

Settings

vike-react-antd provides a configuration +antd for customizing Ant Design Style Compatibility.

// pages/+antd.ts
export { antd }

import { legacyLogicalPropertiesTransformer, px2remTransformer, type StyleProviderProps } from "@ant-design/cssinjs"

const px2rem = px2remTransformer({
  rootValue: 32, // 32px = 1rem; @default 16
})

const antd: Omit<StyleProviderProps, "children" | "cache"> = {
  hashPriority: "high",
  layer: true,
  transformers: [legacyLogicalPropertiesTransformer, px2rem],
}

You can remove the vike-react-antd integration from some of your pages:

// pages/about/+antd.js

export const antd = null

For full customization consider ejecting.

[!NOTE] Consider making a Pull Request before ejecting.

What it does

The vike-react-antd extension allows you to use Ant Design without FOUC.

It collects the page's styles during SSR and injects them in the HTML, ensuring that styles are applied early (before even JavaScript starts loading).

You can learn more at:

• Vike > CSS-in-JS > Collect styles
• Antd Design > Server Side Rendering

For more details, have a look at the source code of vike-react-styled-jsx (which is small).

See also

• Vike Docs > Ant Design
• Vike Docs > CSS-in-JS
• Antd Design