Ant Design StyleAnt Design Style
快速上手
最佳实践
API
更新日志
⌘ K

Table of Contents

修改 container
修改样式注入点
开启 speedy 极速模式
API
创建样式
createStyles
🚧 createStylish
createGlobalStyle
容器组件
ThemeProvider
StyleProvider
Hooks
useTheme
useThemeMode
useResponsive
高级设置
🚧 setupStyled
createInstance
上一篇
ThemeProvider
下一篇
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 & 数字科技
‌
‌
‌
‌

修改 container

指定 container 即可使得所有生成的样式(antd、antd-style)均插入到该节点下。

修改样式注入点

一般情况下不太需要用到,如果你需要兼容组件覆写样式的需求时,可以考虑设定组件样式的注入点,使得其在该节点之后注入。

开启 speedy 极速模式

开启 emotion 的 speedy 模式。建议独立应用可以开启。

Speedy模式

早期的 cssinjs 方案中,样式的插入是一个 style 标签对应一个样式,浏览器解析较慢,但便于修改与调试。

目前 emotion 默认使用现代化的 CSSOM api 插入样式,会把一堆 css 放到一个 标签里,插入后移除相应的内容。这种方式性能很好,支持万级别的样式插入。但与微应用(qiankun)兼容性较差。

antd-style 中默认关闭了 speedy 模式,如果需要,配置 speedy 为 true 即可。

API

继承 ant-design/cssinjs 的 StyleProvider ,其余 API 如下:

属性名类型描述
prefixstringemotion 样式前缀,默认值为 acss
noncestring随机数,用于 CSP
stylisPluginsStylisPlugin[]Stylis 插件数组
containerElement渲染样式的容器
speedyboolean是否开启极速模式,极速模式下不会插入真实的样式 style,默认为 false
insertionPointHTMLElement样式插入点,用于控制第一个样式的插入位置
getStyleManager(styleManager: StyleManager) => void获取到 styleManager 实例的回调函数
childrenReactNode子组件