如何在情感中使用 Antd 主题变量

Question

我在 Next.js 网站中将 Antd 与情感结合使用。我希望能够访问组件内的 Antd 主题变量（用 Less 编写）。像这样的东西：

const StyledButton = styled(Button)`
  background-color: @primary-color
`

做了一些研究并发现了这个问题 Using Ant Design Variables in Styled Components 但它对我不起作用。此外，styles 现已弃用。

谢谢

Answer 1

您可以使用

var(--primary-color)

或仅使用

theme['primary-color']

作为参考。

antd-theme-vars包将帮助您生成所有内容。

Answer 2

我找到了一种将 antd 主题令牌传递给情感主题的方法，以便它将与 antd 的所有内容和更改同步

const WithEmotionTheme = ({ children }: Props) => {
  const { token: antTheme } = theme.useToken();
  return (
    <EmotionThemeProvider theme={antTheme}>{children}</EmotionThemeProvider>
  );
};

export const ThemeProvider = ({ children }: Props) => {
  return (
    <ConfigProvider
      theme={{
        components: {
          Layout: {
            headerHeight: 44,
          },
        },
      }}
    >
      <WithEmotionTheme>{children}</WithEmotionTheme>
    </ConfigProvider>
  );
};

使用方法

export const StyledHeader = styled(Layout.Header)`
  .brand-logo {
    background-color: ${({ theme }) => theme.colorBgBase};
  }
`;

ts 类型会抛出错误我正在弄清楚 基本上这应该是我们需要用类型扩展 antd 主题的东西

https://emotion.sh/docs/typescript#define-a-theme