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

Table of Contents

简介
创建样式实例
指定 container
兼容 styled 主题方案
API
创建样式
createStyles
🚧 createStylish
createGlobalStyle
容器组件
ThemeProvider
StyleProvider
Hooks
useTheme
useThemeMode
useResponsive
高级设置
🚧 setupStyled
createInstance
上一篇
🚧 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 & 数字科技
‌
‌
‌
‌

简介

使用 createInstance 可以创建另一组样式实例方法。对于应用样式方案来说这个方法基本用不到。但对于组件研发的场景则非常必要。

创建样式实例

为组件创建自己的样式实例,这样当使用组件库时可自动获得一套配置好默认值的样式方法。

ts

指定 container

在创建时指定 container ,可以使得样式都在该容器处插入,在 iframe 等场景比较有用。

ts

如果你在组件库里用 createInstance 暴露出的 createStyles 定义好了样式,然后希望在不同的业务场景下指定不同的插入位置。

那么可以在业务应用使用时,在外部包一层 StyleProvider 并设置 container 来实现自定义位置的插入。

兼容 styled 主题方案

如果你使用 styled-component 且需要响应主题变化,都需要在组件外部包裹一个 ThemeProvider。这个时候,如果你的组件也需要响应主题变化,就需要在组件内部再包裹一个 ThemeProvider,通过在 createInstance 中传入 styled 的配置,即可让 styled 后的组件也响应自定义 Token。

ts

API

属性名类型描述
keystring生成的 CSS 关键词,默认为 ant-css。
prefixClsstring默认的组件前缀。
speedyboolean是否开启急速模式,默认为 false。
containerNode渲染容器节点。
customTokenT默认的自定义 Token。
hashPriorityHashPriority控制 CSS 类名生成的优先级。
ThemeProviderOmit<ThemeProviderProps<T>, 'children'>主题提供者。
styledStyledConfigstyled-components 配置项。