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

Question

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

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

theme

这里是从

ThemeProvider

 中定义的样式组件的 

App.jsx

获取的

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

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

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

Answer 1

从文档consume-design-token中，您可以使用

theme.useToken()

钩子获取并使用令牌。

创建一个

ThemeProvider

获取 antd 主题 token 并将其与基础主题组合，然后将组合主题传递给

ThemeProvider

的

styled-components

。

然后你可以通过styled-components的

传递的props

获得组合主题。

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>
  );
}

日志：

props.theme:  {antd: Object, base: Object}

代码沙盒

Answer 2

最近我定制了 Ant design v5 主题来支持多个主题，在这里我分享了正确的文件夹结构，如果您喜欢，请投票以获得更好的覆盖范围。

先决条件：

1. 了解 ant design v5 主题。
2. 了解 TypeScript，如果您仅使用 Javascript，则可以忽略类型。

资源：

1. https://ant.design/docs/react/customize-theme
2. https://ant.design/theme-editor

您可以使用主题来获取准确的配置属性，并且在更改时，您将通过使用主题编辑器了解到底发生了什么变化。

Ant design 主题编辑器将对您的开发有很大帮助。

为您的反应应用程序创建以下文件夹结构。

这是颜色真实性的单一来源。我曾经修改过基础、令牌和组件的颜色。

color.ts
export type ColorsType = {
  colorBgBase: string;
  colorPrimary: string;
  colorSecondary: string;
  colorTertiary: string;
  bgWhite: string;
};

export const colors: ColorsType = {
  colorBgBase: '#000000',
  colorPrimary: '#f59600',
  colorSecondary: '#1e2021',
  colorTertiary: '#3c3d40',
  bgWhite: '#ffffff',
};

token.ts 存储下面的所有配置值、边距、填充、颜色，我修改了主要颜色、基础颜色和容器颜色。默认情况下，它们拥有所有令牌，甚至我们可以使用 Ant 设计提供的 useToken 钩子来访问和使用它们。

token.ts
import { colors } from '@/theming/colors';
import { AliasToken } from '@/common/SSComp/SSComp';
const { colorBgBase, colorPrimary, colorSecondary, bgWhite } = colors;

export const token: Partial<AliasToken> = {
  colorPrimary: colorPrimary,
  colorBgBase: colorBgBase,
  colorBgContainer: colorSecondary,
  colorWhite: bgWhite,
  fontSizeSM: 0,
  lineHeightHeading2: 0,
};

使用 component.ts 文件，您可以通过调整边距、填充、颜色和其他属性来自定义特定的 Antd 组件以满足您的要求。在下面的示例中，我修改了菜单和布局组件，相同的原则适用于每个 Antd 组件。

components.ts
import { colors } from '@/theming/colors';
import { ComponentsConfig } from '@/common/SSComp/SSComp';
const { colorPrimary, colorSecondary, colorTertiary, bgWhite } = colors;

export const components: ComponentsConfig = {
  Layout: {
    headerBg: colorSecondary,
    siderBg: colorSecondary,
  },
  Menu: {
    itemColor: colorPrimary,
    itemSelectedColor: bgWhite,
    itemHoverBg: colorTertiary,
    itemSelectedBg: colorTertiary,
    colorBgContainer: colorSecondary,
    itemBorderRadius: 20,
    colorIconHover: bgWhite,
    itemHoverColor: colorPrimary,
  },
};

这是您需要用作 AppWrapper 的 MainConfig。

themeConfig.ts
import { theme, ThemeConfig } from '@/common/SSComp/SSComp';
import { token } from '@/theming/token';
import { components } from '@/theming/components';

export const themeConfig: ThemeConfig = {
  token,
  components,
  algorithm: theme.darkAlgorithm,
};

应用程序.tsx

import { themeConfig } from '@/theming/themeConfig';

<ConfigProvider theme={themeConfig}>
    <AppLayout>
       <CustomComp>Main app wrapper</CustomComp>
    </AppLayout>
</ConfigProvider>

使用以下方法访问令牌配置。

import { theme } from 'antd';
const { useToken } = theme;
const { token } = useToken();

Got the token, Now you can use the property.
Example:
suppose want to access colorPrimary and apply to a div.

const { colorPrimary } = token;
<div style={{ backgroundColor:colorPrimary }></div>

感谢您耐心阅读到这里，如果对您有帮助，请点赞。

如果您喜欢这种方法或想讨论，请随时与我联系：https://www.linkedin.com/in/afrozquraishi/