[RFC] Support better customization with semantic classNames/styles #54505
Replies: 6 comments 16 replies
-
|
参考 https://mui.com/material-ui/customization/theme-components/#variants |
Beta Was this translation helpful? Give feedback.
-
|
这个没上面的好，另外 hover 状态可以先不要因为 antd 很多都是原生 css 实现的。 |
Beta Was this translation helpful? Give feedback.
-
|
怎么搞这么复杂了，props 全部配置化，最后恐怕会演变成 echarts 那种了，全部得看文档 |
Beta Was this translation helpful? Give feedback.
-
|
这 on 和 state 都是啥，我都看不懂 |
Beta Was this translation helpful? Give feedback.
-
只配置多组合的类名, on 和 state === 伪类状态和组件状态时的 className |
Beta Was this translation helpful? Give feedback.
-
|
伪类具体会怎么实现？ |
Beta Was this translation helpful? Give feedback.
-
propsStyles 的hover 伪类的话就弄不了了 |
Beta Was this translation helpful? Give feedback.
-
|
conditionClass |
Beta Was this translation helpful? Give feedback.
-
最终选择以下方案方案变更 支持 function结构export type ClassNamesType =
| <Record<string, string>
| ((info: { props:Props }) => Record<string, string> | undefined);
export type StylesType =
| <Record<string, React.CSSProperties>
| ((info: {
props: Rrops;
}) => Record<ButtonSemanticName, React.CSSProperties>| undefined);classNames={info => Record<string, string>}
styles={info => Record<string, React.CSSProperties>} |
Beta Was this translation helpful? Give feedback.
-
|
这个更像是上层的二次封装，放在组件库里很奇怪。 |
Beta Was this translation helpful? Give feedback.
-
我理解是暂时缺失这种排列组合的能力, 提供出来是方便二次封装和主题定制的。如果仅用单组件是场景比较低的。会提供在单组件 + ConfigProvider 上 |
Beta Was this translation helpful? Give feedback.
-
可以实现的。 classNames={props => Record<string, string>}
styles={props => Record<string, React.CSSProperties>} |
Beta Was this translation helpful? Give feedback.
-
|
这样也行， 判断让用户写， 那直接推荐在外面 用户自己写function 解析props 出 classNames 和 styles就也行 |
Beta Was this translation helpful? Give feedback.
-
我和豆酱沟通了， 按这个方案来。 我后续把相关issue 和本 discussions 做更新。 |
Beta Was this translation helpful? Give feedback.
-
done |
Beta Was this translation helpful? Give feedback.
-
|
v6 已经发布了，把这个 RFC 归类到 RFCs - archive 分类了 |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
RFC：Support better customization with semantic classNames/styles
📌 动机
🎯 目标
✅ 方案：
classNames/styles as function（结构化数组规则）适合更复杂逻辑场景，语义清晰，易于静态分析和提取。
字段说明
propsclassNames{ root: '...' }🧪 示例解析
最终选择以下方案
方案变更 支持 function
结构
💬 讨论欢迎
如果你有更好的设计思路或反馈，欢迎提出！
Beta Was this translation helpful? Give feedback.
All reactions