[RFC] ConfigProvider supports component

[MadCcc]

Motivation

We supported css var since v5.12.0. By configuring theme in ConfigProvider, the style of components will be particialy replaced by css var. With this feature, use can consume Design Token not only by useToken in react function components, but also by var() in css files, which means without cssinjs users could also consume Design Token now.

However, due to the implementation of css var of antd, the css vars are attached to components of antd by specialize class css-var-xxx. Styles like this will be generated:

This brings us a new problem that if user want to consume such theme from antd's ConfigProvider, but there's no component of antd wraps, the wrong theme, which could be from parent ConfigProvider, would be consumed.

So, by supporting component in ConfigProvider, we could declare the scope of css var by the time we defined it with theme.

API

Props:

export type ConfigProviderProps {
  // ... other props
  component?: React.ComponentType<T> | string;
  className?: string;
  style?: React.CSSProperties;
}

Example

() => (
  <ConfigProvider component="div">
    <Demo />
  </ConfigProvider>
)

This will generate DOM:

<div class="css-var-r1">
  <div class="demo" />
</div>

Detailed Design

Question: should component be inherited?

Drawbacks

This could resolve the problem of consuming css var, but users should be aware of that the naming of css var would be changed by prefixCls, which means it is dynamic, depends on the configuration of ConfigProvider. Since css file (no matter less or sass or other pre-processors) is static, there are risks to consume css var in this way.

Alternatives

• Provide a hook which returns current css var className. Users could apply this className wherever they want.
• Provide a new component like App, which just provide a dom wrapper with css var className.

[crazyair]

holderRender 能用吗？

[MadCcc]

holderRender 在静态方法上，包裹特定组件，这个 RFC 是给 ConfigProvider 加 dom。

[crazyair]

我的意思是，Modal 的 holder 能渲染 div 吗，如果不能，css var 能有作用吗

[MadCcc]

Modal 本身携带 cssvar 的 class，不需要这个。这里的场景是给应用中用户的自定义样式使用

[afc163]

<App /> 是不是相同的作用？

[MadCcc]

App 只推荐使用一次

[li-jia-nan]

[afc163]

哪里的对话。。

[li-jia-nan]

微信的……发给朋友看和他讨论了一下，把聊天记录贴上来了

[MadCcc]

不是默认行为

[zombieJ]

感觉 App 天然支持的效果挺好的，不需要在 CP 上做，可以考虑调整一下文档描述。

[MadCcc]

需要对 App 组件所以写 Singleton 改造，对用户开放多层使用