[RFC] Use design tokens of Ant Design v5 to customize component #36884
Replies: 10 comments 2 replies
This comment has been minimized.
This comment has been minimized.
-
componentName 那块再看看能不能更智能一些,免得多个三方库同名、且正好 token 相同起冲突 |
Beta Was this translation helpful? Give feedback.
-
可以的,我甚至觉得 |
Beta Was this translation helpful? Give feedback.
-
专门搞个板块放 rfcs 如何?https://github.com/ant-design/ant-design/discussions |
Beta Was this translation helpful? Give feedback.
-
参照社区 rfc 来个格式,现在内容有点薄。 |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
核心要解 v4升v5 的方案吧。我之前 YY 过几种方案: 基础:原有的 V4 CSS Modules大部分业务都会这么去用 // style.less
@import '~antd/es/style/themes/default';
.list {
border: 1px solid @primary-color;
border-radius: 2px;
box-shadow: 0 8px 20px @shadow-color;
}
// index.tsx
import styles from './style.less';
const App = ({list}) => {
return (
<List
dataSource={list}
className={styles.list}
/>
);
}; 1. V5 CSS Modules此方案不改动原来的任何样式结构,只是将 v4 的 less变量,改为v5的 token(用css variable 的模式) .list {
border: 1px solid var(--colorPrimary);
border-radius: 2px;
box-shadow: 0 8px 20px var(--colorShadow);
}
// index.tsx
import styles from './style.less';
const App = ({list}) => {
return (
<List
dataSource={list}
className={styles.list}
/>
);
}; 2. V5 CSS IN JS 对象模式这种JS对象的模式应该是现在 antd 内部组件库的使用方式。但我觉得业务里不会想这么去写的。有点别扭 // style.ts
import { createStyles } from '@ant-design/styles';
export default createStyles((token) => ({
list:{
border: `1px solid ${token.colorPrimary}`,
borderRadius: 2,
boxShadow: `0 8px 20px ${token.colorShadow}`,
}
}) // index.tsx
import styles from './style';
const App = ({list}) => {
return (
<List
dataSource={list}
className={styles.list}
/>
);
}; 3. V5 CSS IN JS 字符串模式这是个人最期望的模式。基本上不会太改变原有的写法。 // style.ts
import { createStyles } from '@ant-design/styles';
export default createStyles((token) =>`
.list {
border: 1px solid ${token.colorPrimary};
border-radius: 2px;
box-shadow: 0 8px 20px ${token.colorShadow}`;
}
` // index.tsx
import styles from './style';
const App = ({list}) => {
const styles = createStyles()
return (
<List
dataSource={list}
className={styles.list}
/>
);
}; 4. V5 CSS in JS(纯消费 Token 的方案)这个是 期贤 说他在自己实践的方案。只要antd 给 token 就好了,从灵活性上来说是不错的。但旧业务升级新业务,采用这种方式要全部重构,成本会非常高。 import { css } from '@emotion/css';
import { useToken } from 'antd';
const buttonStyle = (token)=>css`
border: 1px solid ${token.colorPrimary};
border-radius: 2px;
box-shadow: 0 8px 20px ${token.colorShadow}`;
`;
const App: FC = ({list}) => {
const token = useToken();
return (
<List
className={buttonStyle(token)}
dataSource={list}
/>
);
}; 简单评估了下,供参考:
最推荐的方案确定以后,antd token 在设计侧的消费模式才能确定下来。(即在 kitchen 里提供给开发 token 的代码模式) |
Beta Was this translation helpful? Give feedback.
-
Has there been any progress on this? Is there currently a way to import the style of an antd component? We used to attach antd classes to custom components to make them look and feel the same as antd. Is there an approach now that doesn't involve copying the styles from the source code? |
Beta Was this translation helpful? Give feedback.
-
Are there any news? A year passed, is there is still no proper (out of the box) way to reuse theme tokens in custom components without just using them directly in style attr? |
Beta Was this translation helpful? Give feedback.
-
This RFC is outdated. For those who are seeking for a way to startup cssinjs with antd, you can try https://github.com/ant-design/antd-style |
Beta Was this translation helpful? Give feedback.
-
Summary
As we all know that Ant Design v5 is using CSS-in-JS to generate style now, and a lot of tokens which is used for generating themes are also introduced in v5. We would provide hooks like
useToken
anduseStyle
for users to customize components with tokens and CSS-in-JS used in Ant Design.Motivation
For users who want to use Ant Design to do more design, as well as third-party libraries based on Ant Design, directly using Ant Design's CSS-in-JS solution and being able to use Design Token directly will allow them to follow Ant Design's design system, getting a consistent experience with Ant Design.
Design Token is a wonderful design, we implemented a flexible theme system with Design Token. But this is not limited to Ant Design itself, users should also benefit from it, and integrate custom tokens to achieve more cool designs and themes.
Therefore Ant Design v5 will provide two complementary capabilities:
对于想用 Ant Design 做更多设计的用户,以及基于 Ant Design 的三方库来说,直接使用 Ant Design 的 CSS-in-JS 方案,并且能够直接使用 Design Token 能够让他们继续沿用 Ant Design 的设计系统,获得与 Ant Design 一致的体验。
Design Token 是一个绝妙的设计,我们利用 Design Token 实现了灵活的主题系统。但这并不会局限于 Ant Design 本身,用户也应该从中获利,融合自定义的 token 以实现更加炫酷的设计和主题。
因此 Ant Design v5 会提供两种相辅相成的能力:
API
There are two hooks planed:
useCustomToken
: used to inject custom tokens other than tokens provided by Ant Design.useStyleRegister
: used to generate styles with tokens and CSS-in-JS.Basic Example
Use CSS-in-JS and token provided by Ant Design
Use customized token
Customized token can be injected in this way.
Detailed Design
At the beginning, a solution with a higher degree of encapsulation was envisaged. The above APIs were curried, and allow users to divide into four steps when they want to expand the Design Token:
useMyToken
based onuseCustomToken
;useMyToken
to theregisterToken
method and return agenStyleHook
method;genStyleHook
, pass in token-basedstyleFn
, write CSS-in-JS, and returnuseStyle
hook;useStyle
hook in component.The features of this solution:
genStyleHook
method;In order to remain the flexibility of CSS-in-JS and Design Token, the solution described above was finally decided, the
registerToken
layer of encapsulation was removed, and the user's usage steps were simplified as follows:useMyToken
based onuseCustomToken
;useMyStyle
based onuseStyleRegister
;useMyStyle
in the component.If you want to directly use the Design Token preset by Ant Design, the first two steps can be omitted. Of course, users can also curry
useMyStyle
by themselves to reduce the burden on components.一开始设想过封装度更高的方案,将上述这些 API 柯里化,让用户想要拓展 Design Token 时分为四步:
useCustomToken
编写useMyToken
;useMyToken
注册到registerToken
方法中,返回一个genStyleHook
方法;genStyleHook
,传入基于 token 的styleFn
,编写 CSS-in-JS,返回useStyle
hook;useStyle
hook。这个方案的特点是:
genStyleHook
方法;为了保持 CSS-in-JS 和 Design Token 的灵活度,最终还是决定了上文中所述的方案,去掉了
registerToken
这一层封装,将用户的使用步骤简化为:useCustomToken
编写useMyToken
;useStyleRegister
编写useMyStyle
;useMyStyle
.如果想要直接使用 Ant Design 预设的 Design Token,则前两步可以省略。当然用户也可以自行将
useMyStyle
柯里化,给组件减负。Drawbacks
No obvious drawbacks yet.
Beta Was this translation helpful? Give feedback.
All reactions