关于 v3 版本重构后的 ConfigProvider API 讨论

[JeromeLin]

关于 v3 版本重构后的 ConfigProvider 增强 css variables 的设置方法，有几种形式，大家更趋向哪种方式？

做个调研，请回复你的选择～

1. 直接根据 css variables 名称设置

<ConfigProvider
  cssVars={{
    '--button-primary-color': '#ff0000',
    '--cell-height': 52,
    '--action-sheet-background': 'red',
  }}
>

2. 大驼峰，组件平铺方式

<ConfigProvider
  cssVars={{
    ButtonPrimaryColor: '#ff0000',
    CellHeight: 52,
    ActionSheetBackground: 'red',
  }}
>

3. 保持 React style 风格的小驼峰方式，组件分组设置

<ConfigProvider
  cssVars={{
    Button: {
      primaryColor: '#ff0000',
    },
    Cell: {
      height: 52,
    },
    ActionSheet: {
      background: 'red',
    },
  }}
>

4. 不需要这个功能，在 CSS 里设置即可，有没有智能提示无所谓。

ConfigProvider 结合 TS 类型，能够在使用时触发代码提示，方便使用。
在 CSS 改则可能需要翻看文档去使用。

[faner11]

更喜欢3

[yingzhi0808]

喜欢2，但是用小驼峰命名

[JeromeLin]

小驼峰带组件名前缀会比较怪，尤其是分段命名的组件，比如 actionSheetBackground

[ickg5]

我觉得 cssVars 不需要 ConfigProvider 进行配置。如果需要修改 cssVar，可以直接在 css 里直接修改。

[JeromeLin]

组件里已经用上了 CSS 变量。ConfigProvider.cssVars 是在子节点的 style 上修改 css 变量的值。

[ickg5]

这个能实现吗？如果是这个样的话：

<ConfigProvider
  cssVars={{
    '--button-primary-color': '#ff0000',
    '--cell-height': 52,
    '--action-sheet-background': 'red',
  }}
>

function Test() {

  const { cssVars } = useContext(ConfigProvider)

  const { "--var-xx": varXX } = cssVars

  return <div style={{ "--xxx": varXX }}>test</div>

}

[JeromeLin]

可以

[ickg5]

好期待

[JeromeLin]

JSX

<div>
  <Button theme="primary">primary</Button>
  <ConfigProvider
    cssVars={{
      '--button-primary-color': '#ff0000',
    }}
  >
    <div>
      <Button theme="primary">primary</Button>
    </div>
  </ConfigProvider>
</div>

=> DOM

<div>
  <div class="za-button" ...> <!-- 这个 Button 变量值没有被修改 -->
  <div style="--button-primary-color: #ff0000">
    <div class="za-button" ...> <!-- 这个 Button 变量值被修改了 -->
  </div>
</div>

[Me-UserName]

1

[ray0324]

1比较好 语义明确 一眼就看得懂

[Thyiad]

看外面大多是2，不过我个人喜欢3这样按组件分开