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

Table of Contents

Modify container
Modify style insertion point
Enable speedy mode
API
Creating Styles
createStyles
🚧 createStylish
createGlobalStyle
Container Components
ThemeProvider
StyleProvider
Hooks
useTheme
useThemeMode
useResponsive
Advanced Settings
🚧 setupStyled
createInstance

StyleProvider

Used for globally managing style insertion related configurations
引入方法
js
import { StyleProvider } from 'antd-style';
NPM
UNPKG
BundlePhobia
PackagePhobia
Anvaka Graph
编辑文档
PREV
ThemeProvider
NEXT
useTheme

相关资源

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 & 数字科技
‌
‌
‌
‌

Modify container

Specify container to make all generated styles (antd, antd-style) inserted under this node.

Modify style insertion point

In general, it is not often needed. If you need to be compatible with the requirement of component style override, you can consider setting the insertion point of the component style to insert it after this node.

Enable speedy mode

Enable emotion's speedy mode. It is recommended to be enabled for independent applications.

Speedy

In the early cssinjs solutions, each style tag corresponded to one style, which was slow to parse but easy to modify and debug.

Currently, emotion defaults to using modern CSSOM api to insert styles, putting a bunch of css into a tag and then removing the corresponding content after insertion. This method has good performance and supports inserting styles in the tens of thousands. However, it is not very compatible with micro frontends (qiankun).

By default, speedy mode is turned off in antd-style. If needed, set speedy to true to enable it.

API

Inherits from ant-design/cssinjs StyleProvider, other APIs are as follows:

PropertyTypeDescription
prefixstringEmotion style prefix, default value is acss
noncestringRandom number used for CSP
stylisPluginsStylisPlugin[]Array of Stylis plugins
containerElementContainer for rendering styles
speedybooleanWhether to enable speedy mode, under speedy mode, real style will not be inserted, default is false
insertionPointHTMLElementStyle insertion point, used to control the insertion position of the first style
getStyleManager(styleManager: StyleManager) => voidCallback function to get the styleManager instance
childrenReactNodeChild components