如何使用Antd v5主题样式转场？

Question

环境： 安特德：5.8.3 预反应：10.17.0

根据docs我可以使用主题令牌。哪些是静态数据。

我想创建一个自定义的“contentEditable”元素并将其样式设置为像 Antd.Input 一样。但缺少任何风格转变。 如何在我的自定义组件中获取 Antd 的样式转换？

Answer 1

在这次 antd git 讨论中，我发现可以通过向

"css-..."/"css-dev-only-do-not-override-..."

主题属性提供

hashed: false

来关闭

ConfigProvider

。

但是这篇 antd 博客文章 和这篇 one 回答了样式如何生成以及为什么我们需要散列。

我的第一个方法是使用 hashed: false 制作

嵌套主题

，并仅包装我的自定义组件。添加不可见的 Antd 输入以强制 Antd 主题生成

ant-input

样式。将

ant-input

添加到我的自定义“contentEditable”中。

代码示例：

function Custom() {
  return (
    <ConfigProvider theme={{ hashed: false }}>
      <div
        contentEditable={true}
        className="ant-input"
      />
      <Input hidden />
    </ConfigProvider>
  )
}

这导致

ant-input

：

• 全球生成。
• 重新渲染时重新生成（如果我理解正确的话）。

我的下一步是查看 Antd 输入组件本身的 code（第 90、92、96 行），并弄清楚它如何生成样式。
这根本不是推荐的方法。 但我可以将此代码应用到我的组件中：

function Custom() {
  const { getPrefixCls } = useContext(ConfigContext)
  const prefixCls = getPrefixCls('input')
  const [, hashId] = useStyle(prefixCls)
  
  return (
    <div
      contentEditable={true}
      className={classNames("ant-input", hashId)}
    />
  )
}