Writing Styles Using createStyles

The core API provided by antd-style is createStyles, which allows organizing styles using class names, similar to the writing style of CSS Modules.

Default

This is our first recommended writing style. It can be used to write application styles or override basic component styles.

Typical Example

A demo example containing basic usage, understanding this demo will enable you to use the createStyles method.

Detailed Introduction

createStyles provides several writing styles to meet development needs and improve the development experience for different scenarios.

Style 1: No Dynamic Requirement

If there is no dynamic requirement, you can directly use createStyles to pass in a style object.

Style 2: Using antd Tokens

The createStyles method can use antd tokens and custom tokens. In this case, the parameter of createStyles needs to be a function.

Style 3: Using External Props

The second parameter of the function can receive external props.

tsx

The following demo is an example of overriding the antd Select component with external input parameters.

Organizing Code Files

If the component styles are simple, they can be merged into one file. However, if the style file is large, it is strongly recommended to separate the style file into a style.ts file. As shown below:

Other Common CSS Syntax

Keyframes

Supports two types of keyframes writing, using the keyframes method or the native CSS @keyframes.

API

For detailed API documentation of the createStyles method, please refer to the createStyles API documentation.

‌
‌
‌
‌

Writing Styles Using createStyles

The core API provided by antd-style is createStyles, which allows organizing styles using class names, similar to the writing style of CSS Modules.

Default

This is our first recommended writing style. It can be used to write application styles or override basic component styles.

Typical Example

A demo example containing basic usage, understanding this demo will enable you to use the createStyles method.

Detailed Introduction

createStyles provides several writing styles to meet development needs and improve the development experience for different scenarios.

Style 1: No Dynamic Requirement

If there is no dynamic requirement, you can directly use createStyles to pass in a style object.

Style 2: Using antd Tokens

The createStyles method can use antd tokens and custom tokens. In this case, the parameter of createStyles needs to be a function.

Style 3: Using External Props

The second parameter of the function can receive external props.

tsx

The following demo is an example of overriding the antd Select component with external input parameters.

Organizing Code Files

Other Common CSS Syntax

Keyframes

Supports two types of keyframes writing, using the keyframes method or the native CSS @keyframes.

API

For detailed API documentation of the createStyles method, please refer to the createStyles API documentation.

Table of Contents

Table of Contents

Writing Styles Using createStyles

Typical Example

Detailed Introduction

Style 1: No Dynamic Requirement

Style 2: Using antd Tokens

Style 3: Using External Props

Organizing Code Files

Other Common CSS Syntax

Keyframes

API

Writing Styles Using createStyles

Typical Example

Detailed Introduction

Style 1: No Dynamic Requirement

Style 2: Using antd Tokens

Style 3: Using External Props

Organizing Code Files

Other Common CSS Syntax

Keyframes

API

createStyles 标准用法

结合 antd token

带有props入参的写法

复杂样式场景下建议独立拆分样式文件