【React】Ant Design自定义主题风格及主题切换

这篇具有很好参考价值的文章主要介绍了【React】Ant Design自定义主题风格及主题切换。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Ant Design 的自定义主题,对于刚入手的时候感觉真是一脸蒙圈,那今天给它梳理倒腾下;

ant design layout theme,Web前端,# React,react.js,前端,前端框架

1、自定义主题要点

整体样式变化,主要两个部分:

1.1、Design Token

https://ant.design/docs/react/customize-theme-cn#theme

官方介绍一大堆,咱们粗暴点就当作key=>value配置内容来看和理解!
大体分为四块配置项:

分类 涉及配置项
通用/基本样式 token 可查阅SeedToken、MapToken、AliasToken
组件样式 components 查阅各个组件最底下的主题变量(Design Token)内容
样式算法 algorithm 这块其实就算UI库内部自动帮你换算不同“等级”颜色color值
扩展配置 inherit、cssVar、hashed 这块应该很少会去改它,做主题切换的时候建议cssVar开启

1.2、全局配置 ConfigProvider 组件

https://ant.design/components/config-provider-cn

import React from 'react';
import { ConfigProvider } from 'antd';

// ...
const Demo: React.FC = () => (
  <ConfigProvider componentSize={"middle"}>
  // 界面组件
  </ConfigProvider>
);

export default Demo;

这块涉及到主题样式的主要是componentSize配置项和组件配置

2、实战

以下做个实验性案例,不要纠结细节哈!

2.1、实验环境

  • next: 14.1.0
  • react:^18
  • antd:^5.14.1
√ Would you like to use TypeScript? ... Yes
√ Would you like to use ESLint? ... No
√ Would you like to use Tailwind CSS? ... No
√ Would you like to use `src/` directory? ... No
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to customize the default import alias (@/*)? ... Yes
√ What import alias would you like configured? ... @/*

2.2、目录结构

| - app
	|- page.tsx
|- theme
	|- default
		|- index.ts
	|- custom
		|- index.ts
	|- index.ts
	|- themeCenter.ts

2.3、相关文件编写

2.3.1、page.tsx

主要方便实验展示

"use client";

import React, { useState } from "react";
import {
  SearchOutlined,
  AppstoreOutlined,
  MailOutlined,
  SettingOutlined,
} from "@ant-design/icons";
import { Button, Flex, Tooltip, Menu, Pagination, Divider } from "antd";

import ThemeComponents from "@/theme";

const items: any = [
  {
    label: "Navigation One",
    key: "mail",
    icon: <MailOutlined />,
  },
];

const App: React.FC = () => {
  const [theme, setTheme] = useState("default");

  return (
    <>
      <Flex gap="small">
        <Button type="primary" onClick={() => setTheme("default")}>
          主题1
        </Button>
        <Button type="primary" onClick={() => setTheme("custom")}>
          主题2
        </Button>
      </Flex>

      <Divider />
      <ThemeComponents theme={theme} dark={'light'}>
        <Flex gap="small" vertical>
          <Flex wrap="wrap" gap="small">
            <Button type="primary" shape="circle">
              A
            </Button>
            <Button type="primary" icon={<SearchOutlined />}>
              Search
            </Button>
            <Tooltip title="search">
              <Button shape="circle" icon={<SearchOutlined />} />
            </Tooltip>
            <Button icon={<SearchOutlined />}>Search</Button>
          </Flex>
          <Menu mode="horizontal" items={items} selectedKeys={["mail"]} />
          <Pagination defaultCurrent={1} total={50} />
        </Flex>
      </ThemeComponents>
    </>
  );
};

export default App;

2.3.1、ThemeComponents

// 这里仅演示主题切换,其他业务逻辑~~~自己探索哈!
import React, { useEffect, useState } from "react";
import { ConfigProvider } from "antd";
import { ThemeModeEnum } from "@/theme/themeCenter.d";
import DefaultTheme from "./default";
import CustomTheme from "./custom";

type Props = {
  theme: string;
  dark?: boolean,
  children: React.ReactNode;
};

const ThemeMap = {
  default: DefaultTheme,
  custom: CustomTheme,
};

const ThemeComponents = ({ theme = "default", dark, children }: Props) => {
  theme = theme ? theme : "default";
  const [themeCenter, setThemeCenter] = useState(new ThemeMap[theme]());
  const [darkTheme, setDarkTheme] = useState(dark);

  useEffect(() => {
    console.log("theme:", theme);
    setThemeCenter(new ThemeMap[theme]());
  }, [theme]);
  
  useEffect(() => {
    console.log("darkTheme:", dark);
    if(themeCenter){
    	themeCenter.ThemeMode = dark;
    	setDarkTheme(dark);
    }
  }, [dark]);

  return (
    <ConfigProvider {...themeCenter?.ThemeConfigProvider}>
      {children}
    </ConfigProvider>
  );
};

export default ThemeComponents;

2.3.1、Theme管理

这部分主要涉及两个部分:基础主题类继承主题类

继承主题类
这部分主要用于不同主题样式的具体化配置
按主题目录区分,方便主题做其他更复杂的扩展预留空间

// 案例file: theme/default/index.ts
import ThemeCenter from "../themeCenter"

class ThemeConfiguration extends ThemeCenter
{
    // 这是父级ThemeCenter下放的初始化方法,主题初始化在这里进行
    // 除_initThemeConfig方法外,其他的可自行定义
    protected _initThemeConfig(){ 
        // 设置主题色
        this.ThemeColor = '#FF5C00';

        // 设置基础主题样式Token
        this.setThemeAllToken({
            fontSize: 14,
            colorLink: '#1890ff',
        }, 'token')

        // 设置组件样式Token
        this.LayoutComponentsToken();
        this.MenuComponentsToken();

        // ConfigProvider组件默认配置
        this.setThemeConfigProvider({
            componentSize: 'small'
        })
    }

    protected LayoutComponentsToken(){
        this.setThemeComponentsToken('Layout',{
            headerBg: '#fff',
            headerColor: '#333',
            headerHeight: 35,
            headerPadding: '0 16px 0 0',

            lightSiderBg: 'transparent',
            siderBg: '#fff',
            bodyBg: 'transparent',
            // footerBg: '#f2f3f5',
            // footerPadding: '24px 0'
        });
    }

    protected MenuComponentsToken(){
        // @link https://ant.design/components/menu-cn#%E4%B8%BB%E9%A2%98%E5%8F%98%E9%87%8Fdesign-token
        this.setThemeComponentsToken('Menu',{
            collapsedWidth: 46
            // itemBg: "rgba(255,255,255, .85)",
            // darkItemBg: 'var(--ant-layout-sider-bg)',
            // darkItemColor: 'rgba(0,0,0, .65)',
            // darkItemDisabledColor: 'rgba(0,0,0, .25)',
            // darkItemHoverBg: 'rgba(255,92,0, .65)',
            // darkItemHoverColor: '#fff',
            // darkPopupBg: '#181818',
            // darkSubMenuItemBg: 'var(--ant-layout-sider-bg)',
        })
    }
}

export default ThemeConfiguration;

基础主题类

// file: /theme/themeCenter.ts

import type {
    ThemeConfig,
    ThemeComponentsConfig,
    ThemeConfigProviderProps
} from "./themeCenter.d"
import { ThemeModeEnum } from "./themeCenter.d"
import {theme} from "antd";


class ThemeCenter {
    private themeName = "default";
    private themeColor:string = '#FF5C00';
    private themeMode:ThemeModeEnum = ThemeModeEnum.AUTO;

    /**
     * 明暗算法配置
     *  @var {object} _algorithm
     */
    private _algorithm = {
        light: theme.defaultAlgorithm,
        dark: theme.darkAlgorithm
    }

    private _lightAlgorithm = this._algorithm['light'];
    private _darkAlgorithm = this._algorithm['dark'];

    /**
     * 自定义主题配置
     * @link https://ant.design/docs/react/customize-theme-cn#theme
     * @var {ThemeConfig} _customThemeToken
     */
    private _customThemeToken:ThemeConfig = {
        token: {},
        // 继承上层 ConfigProvider 中配置的主题
        inherit: true,
        algorithm: this._algorithm['light'],
        components: {},
        // 开启 CSS 变量,参考使用 CSS 变量
        // @link https://ant.design/docs/react/css-variables-cn#api
        cssVar: {
            prefix: 'bogoo',
            key: 'theme',
        },
        // 组件 class Hash 值
        hashed: true,
    }

    /**
     * 自定义ConfigProvider组件配置
     *
     * @var {ThemeConfigProviderProps} _customConfigProvider
     */
    private _customConfigProvider:ThemeConfigProviderProps = {
        componentSize: undefined,
        theme: this._customThemeToken
    }

    constructor() {this._initThemeConfig();}

    protected _initThemeConfig(){}

    /**获取主题名称*/
    public get ThemeName(){return this.themeName;}
    /**获取当前主题色*/
    public get ThemeColor(){return this.themeColor;}
    public set ThemeColor(color: string){
        this.themeColor = color;
        this.setThemeAllToken({colorPrimary: color}, 'token')
    }
    /**获取明暗色系名称*/
    public get ThemeMode(){return this.themeMode;}
    /**设置明暗主题色配置*/
    public set ThemeMode(mode: ThemeModeEnum){
        this.themeMode = mode;
        let _algorithm: any = this._lightAlgorithm;
        if (mode === ThemeModeEnum.AUTO) {
            // _algorithm = this._darkAlgorithm;
        }else{
            _algorithm = mode===ThemeModeEnum.LIGHT ? this._lightAlgorithm : this._darkAlgorithm;
        }
        this.setThemeAllToken({algorithm: _algorithm});
    }
    /**主题Token配置*/
    public get ThemeToken(){return this._customThemeToken;}
    /**
     * 设置主题Token配置
     *
     * @param {ThemeConfig|ThemeComponentsConfig} token 全局主题token或组件token
     * @param {'token'|'algorithm'|'components'} field 可选,若指定配置名称,则仅更新对应配置
     *
     * @return {ThemeConfig}
     */
    public setThemeAllToken(
        token: ThemeConfig|ThemeComponentsConfig,
        field?:'token'|'algorithm'|'components'
    ){
        let _token:any = {};
        let _updateToken = token;
        if (field){
            if (!['token','algorithm','components'].includes(field))return this._customThemeToken;
            if (_updateToken instanceof Array){
                // @ts-ignore
                _token[field] = this._customThemeToken[field].concat(_updateToken)
            }else if(typeof _updateToken === 'object'){
                _token[field] = Object.assign({}, this._customThemeToken[field]||{}, _updateToken)
            }else{
                _token[field] = _updateToken
            }
        }else{
            _token = _updateToken;
        }
        console.log('_token:', _token)
        Object.assign(this._customThemeToken, _token);
        return this._customThemeToken;
    }
    /**
     * 组件主题Token配置
     *
     * @param {string} componentsName 组件名称(首字母大小)
     * @param {ThemeComponentsConfig} token 主题样式配置
     *
     * @return {void}
     */
    public setThemeComponentsToken(componentsName:string, token: ThemeComponentsConfig){
        this.setThemeAllToken({
            // @ts-ignore
            [componentsName]: Object.assign({} ,this._customThemeToken?.components[componentsName]||undefined, token)
        }, 'components')
    }
    /**ConfigProvider组件配置*/
    public get ThemeConfigProvider(){return this._customConfigProvider;}
    public setThemeConfigProvider(config:ThemeConfigProviderProps){
        Object.assign(this._customConfigProvider, config);
    }
}

export default ThemeCenter;

补充

  • themeCenter.d.ts
import type {
    ThemeConfig as AntdThemeConfig,
    ComponentsConfig as AntdComponentsConfig,
} from "antd/es/config-provider/context";
import type {SizeType} from "antd/es/config-provider/SizeContext";
import type {ReactNode} from "react";

export enum ThemeModeEnum {
    AUTO = 'auto',
    DARK = 'dark',
    LIGHT = 'light'
}

export interface ThemeConfigProviderProps {
    componentSize?: SizeType;
    theme?:AntdThemeConfig;
}

export interface ThemeConfig extends AntdThemeConfig {}
export interface ThemeComponentsConfig extends AntdComponentsConfig {}

没啦!学废了嘛??!!!文章来源地址https://www.toymoban.com/news/detail-855549.html

到了这里,关于【React】Ant Design自定义主题风格及主题切换的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React——Ant Design组件库Message全局提示的使用

    官网推荐使用Hook调用的方法         这种方法只能在本页显示,如果显示后跳转页面就不会显示。因为{contextHolder}是写在本页面的。如果需要跳转页面可以用promise调用 传递的参数依次为,提示信息、显示时间、关闭后触发的回调

    2024年02月11日
    浏览(44)
  • 为React Ant-Design Table增加字段设置

    最近做的几个项目经常遇到这样的需求,要在表格上增加一个自定义表格字段设置的功能。就是用户可以自己控制那些列需要展示。 在几个项目里都实现了一遍,每个项目的需求又都有点儿不一样,迭代了很多版,所以抽时间把这个功能封装了个组件:@silverage/table-custom,将

    2024年02月05日
    浏览(58)
  • Ant Design Charts 自定义提示信息、图例、文本信息

    自定义图例 legend 关闭图例 legend: false; 图例配置参数,布局类型 layout 图例展示位置 position 布局类型 layout optional horizontal | vertical 图例布局方式。提供横向布局和纵向布局。 图例展示位置 position 图例位置,可选项:‘top’, ‘top-left’, ‘top-right’, ‘left’, ‘left-top’, ‘l

    2024年02月11日
    浏览(34)
  • Ant Design:企业级 UI 设计语言和 React 库 | 开源日报 No.88

    Stars: 87.9k License: MIT Ant Design 是一个企业级 UI 设计语言和 React UI 库。 为 Web 应用程序设计的企业级 UI。 提供一套高质量的开箱即用的 React 组件。 使用可预测静态类型编写 TypeScript 代码。 包含完整的设计资源和开发工具包。 支持数十种语言国际化支持 基于 CSS-in-JS 实现强大

    2024年02月04日
    浏览(46)
  • 26、react UI 组件库 Ant-design 蚂蚁金服UI组件库

    material-ui (国外) 官网:https://mui.com/zh/material-ui/getting-started/installation/ 这是国外非常流行的 react UI 组件库,但是在国内并不是很常用。 Ant-design UI组件库 官网:https://ant.design/index-cn 这是国内比较流行 react UI 组件库,又蚂蚁金服团队开发。这一篇博客主要来讲解在 react 项目中

    2024年02月08日
    浏览(36)
  • ant.design 组件库中的 Tree 组件实现可搜索的树: React+and+ts

    ant.design 组件库中的 Tree 组件实现可搜索的树,在这里我会详细介绍每个方法,以及容易踩坑的点。 效果图: 下面是要渲染在 Tree 上的的数据,这是一个伪数据,如果你在开发时使用,直接修改给对应的变量名,赋值即可 这个方法是 Tree 组件提供的,用来筛选出要渲染的数

    2024年02月14日
    浏览(38)
  • Vue 3 中 Ant Design Vue 如何自定义表格 Table 的表头(列头)内容?

    项目用到的是 Ant Design Vue (2.2.8) 组件库,开发中遇到一个如下图的表格,有些表头文本后面会有一些自定义图标,鼠标移入图标时显示对应的审批时间提示。当前列如果没有审批时间就会隐藏图标,只展示列头文本。 使用 Ant Design Vue 基础的 Table 组件是无法满足这个场景的

    2024年02月16日
    浏览(45)
  • 第九篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:使用内置组件实现响应式设计

    第一篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:从helloworld开始 第二篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:天气应用 第三篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:健身追踪 第四篇【传奇开心果系列】Ant Design Mobile of React 开发移

    2024年01月21日
    浏览(70)
  • ant.design(简称antd)中Form表单组件提交表单、表单数据效验、表单自定义效验、表单布局集合

            ant.design(简称antd)现在我们使用较为广泛,web端中后台表单使用非常广泛,此遍文章集合了表单日常用法及使用注意事项。         下图是UI目标样式图                           1、以下是一个组件,首先引入ant相关依赖,在引入react相关依赖,主要使用了For

    2024年02月13日
    浏览(58)
  • 第十二篇【传奇开心果系列】Ant Design Mobile of React开发移动应用:内置组件实现酷炫CSS 动画

    第一篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:从helloworld开始 第二篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:天气应用 第三篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:健身追踪 第四篇【传奇开心果系列】Ant Design Mobile of React 开发移

    2024年01月20日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包