如何使用 Ant design v5 主题和样式组件

Question

Antd 5.0 引入了新的主题系统。但我想知道当我通过样式组件声明组件时如何访问主题的那些设计标记。通常我这样声明我的组件。

const MyComponent = styled.button`
  color:${props=> props.theme.color.primary};
`;

themeThemeProvider这是从定义的样式组件中获取的App.jsx

<ThemeProvider theme={baseTheme}>
<App/>
</ThemeProvider>

因此，主题只能访问主题文件中定义的设计令牌。如何访问 Antd 主题的其他 token？

我想到的一种方法是创建一个主题来覆盖 Antd 的每一个设计标记。但我认为这是个坏主意

Answer 1

从文档Consumer-design-token中，您可以使用钩子获取并使用令牌theme.useToken()。

创建一个ThemeProvider获取 antd 主题令牌并将其与基本主题组合，然后将组合主题传递给ThemeProviderof styled-components。

然后你可以通过传递的props得到组合的主题styled-components。

theme-provider.tsx：

import { ThemeProvider } from "styled-components";
import { theme } from "antd";
import React from "react";

export default ({ children }: React.PropsWithChildren) => {
  const { token } = theme.useToken();
  return (
    <ThemeProvider theme={{ antd: token, base: { color: "mediumseagreen" } }}>
      {children}
    </ThemeProvider>
  );
};

App.tsx：

import styled from "styled-components";
import { ConfigProvider } from "antd";
import ThemeProvider from "./theme-provider";

const Button = styled.button`
  color: ${(props) => {
    console.log("props.theme: ", props.theme);
    return props.theme.antd.colorPrimary;
  }};
`;

export default function App() {
  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: "red"
        }
      }}
    >
      <ThemeProvider>
        <Button>Hello World</Button>
      </ThemeProvider>
    </ConfigProvider>
  );
}

日志：

import { ThemeProvider } from "styled-components";
import { theme } from "antd";
import React from "react";

export default ({ children }: React.PropsWithChildren) => {
  const { token } = theme.useToken();
  return (
    <ThemeProvider theme={{ antd: token, base: { color: "mediumseagreen" } }}>
      {children}
    </ThemeProvider>
  );
};

代码沙盒