---
nav:
  title: 指南
  order: 1
title: 主题样式
order: 2
---

当前组件库基于 Ant Design 6。主题系统延续 Design Token 与 CSS-in-JS 方案，以下列出相关参考及使用文档。
## CSS-in-js
[@ant-design/cssinjs文档](https://ant-design.github.io/cssinjs/)

[使用antd5中css-in-js来自定义组件](https://www.ithere.net/article/1635530407272484865)

[从 Ant Design 5.0 中学习 CSS-in-JS](https://juejin.cn/post/7257708221360111675#heading-8)

[5分钟学会！antd5自研的css-in-js的定制主题原理](https://juejin.cn/post/7190160289617150008)

**token**

Ant Design 的 Design Token 模型将 Token 拆解为 Seed Token、Map Token 和 Alias Token 三部分。这三组 Token 构成由 Seed Token 派生 Map Token、再派生 Alias Token 的关系。
## antd-style
[使用方法及文档参考](https://ant-design.github.io/antd-style/api/create-styles)

["css``"使用配置参考Emotion](https://emotion.sh/docs/introduction)

[antd-style：业务应用中的 antd CSSinJS 最佳实践](https://juejin.cn/post/7263871284010303546#heading-8)

### 变量参考
[1、主题编辑器](https://ant-design.antgroup.com/theme-editor-cn#Size)

[2、组件变量](https://ant-design.antgroup.com/docs/react/migrate-less-variables-cn#%E5%A6%82%E4%BD%95%E9%85%8D%E7%BD%AE-component-token)

[3、旧的less变量与Component Token对照](https://ant-design.antgroup.com/docs/react/migrate-less-variables-cn)

[4、ProLayout 相关主题](https://procomponents.ant.design/components/layout#token)


### 使用注意项

1、全局顶层包裹 ThemeProvider 后，重置theme.token更改样式值时，若直接使用使用 `useTheme` 获取 theme 对象,或者使用`CreateStyles`生成的样式表里面的token还是原来`antd-style`内置的值
[参考](https://ant-design.github.io/antd-style/zh-CN/api/theme-provider#usetheme-%E7%94%A8%E6%B3%95)

示例参考：

```js
import { ThemeProvider, CreateStyles } from 'antd-style';

const useStyles = createStyles(({ token, css }) => {
  return {
    block: css`
      display: inline-block;
      width: 400px;
      height: 100px;
      background: ${token.colorPrimary};
    `,
  };
});

const ChildApp = (props)=> {
  const {title} = props;
  const { styles } = useStyles()
  const token = useTheme()
  return <div className={styles.block} title={title}>
    嵌套子组件使用，token.colorPrimary变化了，使用的是更改后的值{token.colorPrimary}
  </div>
}

export default () => (
        <ThemeProvider theme={{ token: { colorPrimary: '#9f18ff' } }}>
          <div className={styles.block}  title={'未包裹 ThemeProvider'}>
            直接使用,token.colorPrimary未变化，使用的时默认值{token.colorPrimary}
          </div>
          <ChildApp title={'包裹 ThemeProvider'}/>
        </ThemeProvider>
);

```