Ant Design StyleAnt Design Style
Quick Start
Best Practices
API Reference
Release Notes
⌘ K

Table of Contents

Introduction
Creating Style Instances
Specify Container
Compatible with styled Themes
API
Creating Styles
createStyles
🚧 createStylish
createGlobalStyle
Container Components
ThemeProvider
StyleProvider
Hooks
useTheme
useThemeMode
useResponsive
Advanced Settings
🚧 setupStyled
createInstance

createInstance

Method for creating style instances
引入方法
js
import { createInstance } from 'antd-style';
NPM
UNPKG
BundlePhobia
PackagePhobia
Anvaka Graph
编辑文档
PREV
🚧 setupStyled

相关资源

Ant Design
Ant Design Pro
Ant Design Pro Components
Umi-React 应用开发框架
Dumi-组件/文档研发工具
qiankun-微前端框架

社区

Medium
Twitter
yuqueAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconfSEE Conf-SEE Conf-蚂蚁体验科技大会

帮助

GitHub
更新日志
讨论

more products更多产品

yuque语雀-知识创作与分享工具
AntVAntV-数据可视化解决方案
EggEgg-企业级 Node.js 框架
kitchenKitchen-Sketch 工具集
xtech蚂蚁体验科技
Copyright © 2022-2024
Made with ❤️ by 蚂蚁集团 - AFX & 数字科技
‌
‌
‌
‌

Introduction

The createInstance method can be used to create another set of style instance methods. This method is basically unnecessary for applying style schemes, but it is essential for component development scenarios.

Creating Style Instances

Create your own style instance for the component, so that when using the component library, you can automatically obtain a set of style methods with default values configured.

ts

Specify Container

Specifying a container during creation can ensure that styles are inserted at that container, which is useful in scenarios such as iframes.

ts

If you define styles with createStyles exposed by createInstance in a component library, and then want to specify different insertion positions in different business scenarios.

Then, when using in the business application, wrap a layer of StyleProvider externally and set container to achieve custom insertion positions.

Compatible with styled Themes

If you use styled-component and need to respond to theme changes, you need to wrap a ThemeProvider outside the component. At this time, if your component also needs to respond to theme changes, you need to wrap another ThemeProvider inside the component. By passing the styled configuration to createInstance, you can make the component styled with styled respond to custom Tokens.

ts

API

Property NameTypeDescription
keystringThe generated CSS keyword, default is ant-css.
prefixClsstringDefault component prefix.
speedybooleanWhether to enable speedy mode, default is false.
containerNodeRendering container node.
customTokenTDefault custom Token.
hashPriorityHashPriorityControl the priority of CSS class name generation.
ThemeProviderOmit<ThemeProviderProps<T>, 'children'>Theme provider.
styledStyledConfigstyled-components configuration.