React + Antd realiza la segunda función del tema de cambio dinámico (tema predeterminado y cambio de tema oscuro)

prefacio

En el artículo anterior ( https://blog.csdn.net/m0_58016522/article/details/121751043 ), expliqué brevemente cómo cambiar dinámicamente algunas configuraciones de estilo de tema a través de ConfigProviderla configuración global color) para mostrar el efecto inicial, el efecto puede no ser ideal. Para el desarrollo de proyectos reales, uno de los más exigentes es cambiar dinámicamente entre el tema predeterminado (brillante) y el tema oscuro. Hay una demostración oficial en el sitio web oficial de ant-design como referencia: https://github.com /gzgogo/antd -tema . A continuación, usaré una pequeña demostración para mostrar los pasos de desarrollo de la función de cambio entre el tema predeterminado y el tema oscuro.prefixClsprimary

Ideas de implementación

En primer lugar, mi idea es modificar el estilo de diseño de la hormiga a través de ConfigProviderla configuración global , es decir, el tema predeterminado controla el estilo a través del prefijo del nombre de la clase , y el tema oscuro controla el estilo a través del prefijo del nombre de la clase.prefixClsprefixcustom-defaultcustom-dark

1. Compile el archivo css del tema predeterminado

# 指定prefix为custom-default
# 源文件为antd.less
$ lessc --js --modify-var="ant-prefix=custom-default" node_modules/antd/dist/antd.less custom-default.css

El comando que sigue los pasos anteriores generará un custom-default.cssarchivo, que es el archivo de estilo del tema predeterminado, y hay una sección del siguiente estilo en el contenido del archivo:

	body {
    
    
	  margin: 0;
	  color: rgba(0, 0, 0, 0.85);
	  font-size: 14px;
	  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
	  font-variant: tabular-nums;
	  line-height: 1.5715;
	  background-color: #fff;
	  font-feature-settings: 'tnum';
	}

Este contenido es principalmente para controlar el estilo del bloque del cuerpo, modificamos este estilo de la siguiente manera

	body .custom-default {
    
     /*添加.custom-default子样式，作用我们在下文中会说明*/
	  margin: 0;
	  color: rgba(0, 0, 0, 0.85);
	  font-size: 14px;
	  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
	  font-variant: tabular-nums;
	  line-height: 1.5715;
	  background-color: #fff;
	  font-feature-settings: 'tnum';
	}

2. Igual que el paso 1 anterior, compile el archivo css del tema oscuro

	# 指定prefix为custom-dark
	# 源文件为antd.dark.less
	$ lessc --js --modify-var="ant-prefix=custom-dark" node_modules/antd/dist/antd.dark.less custom-dark.css

Del mismo modo, custom-dark.csshay un párrafo de este tipo en el archivo de estilo oscuro generado:

	body {
    
    
	  margin: 0;
	  color: rgba(255, 255, 255, 0.85);
	  font-size: 14px;
	  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
	  font-variant: tabular-nums;
	  line-height: 1.5715;
	  background-color: #000;
	  font-feature-settings: 'tnum';
	}

También hacemos una modificación similar:

	body .custom-dark {
    
     /*添加.custom-dark 子样式，作用我们在下文中会说明*/
	  margin: 0;
	  color: rgba(255, 255, 255, 0.85);
	  font-size: 14px;
	  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
	  font-variant: tabular-nums;
	  line-height: 1.5715;
	  background-color: #000;
	  font-feature-settings: 'tnum';
	}

3. index.jsIntroduzca el archivo css generado por los dos pasos anteriores

index.jsEl código completo es el siguiente:

import React, {
    
     useState } from "react";
import ReactDOM from "react-dom";
import {
    
    
  Button,
  Calendar,
  Card,
  DatePicker,
  Empty,
  Layout,
  Radio,
  Space
} from "antd";
import {
    
     DownloadOutlined } from "@ant-design/icons";
import {
    
     ConfigProvider } from "antd";

// import "antd/dist/antd.css";
import "./custom-default.css";    // 引入custom-default.css 以及 custom-dark.css
import "./custom-dark.css";

import "./index.css";

const TestComponent = () => {
    
    
  const [prefix, setPrefix] = useState("custom-default");

  const handlePrefixChange = (e) => {
    
    
    setPrefix(e.target.value);
  };

  return (
    <ConfigProvider prefixCls={
    
    prefix}>
      <div className={
    
    `App ${
      
      prefix}`} style={
    
    {
    
     height: "100%" }}>
        <Layout style={
    
    {
    
     height: "100%" }}>
          <Layout.Content>
            <Space>
              Change Theme:
              <Radio.Group onChange={
    
    handlePrefixChange} value={
    
    prefix}>
                <Radio value="custom-default">default Style</Radio>
                <Radio value="custom-dark">dark Style</Radio>
              </Radio.Group>
            </Space>
            <br />
            <Space>
              <DatePicker />
              <Empty />
              <Card
                title="Default size card"
                extra={
    
    <a href="#">More</a>}
                style={
    
    {
    
     width: 300 }}
              >
                <p>Card content</p>
                <p>Card content</p>
                <p>Card content</p>
              </Card>
            </Space>
            <br />
            <Space>
              <Radio.Group>
                <Radio.Button value="large">Large</Radio.Button>
                <Radio.Button value="default">Default</Radio.Button>
                <Radio.Button value="small">Small</Radio.Button>
              </Radio.Group>
              <br />
              <br />
              <Button type="primary">Primary</Button>
              <Button>Default</Button>
              <Button type="dashed">Dashed</Button>
              <br />
              <Button type="link">Link</Button>
              <br />
              <Button type="primary" icon={
    
    <DownloadOutlined />} />
              <Button
                type="primary"
                shape="circle"
                icon={
    
    <DownloadOutlined />}
              />
              <Button
                type="primary"
                shape="round"
                icon={
    
    <DownloadOutlined />}
              />
              <Button type="primary" shape="round" icon={
    
    <DownloadOutlined />}>
                Download
              </Button>
              <Button type="primary" icon={
    
    <DownloadOutlined />}>
                Download
              </Button>
            </Space>
            <br />
            <Space>
              <Calendar fullscreen={
    
    false} />
            </Space>
          </Layout.Content>
        </Layout>
      </div>
    </ConfigProvider>
  );
};

ReactDOM.render(<TestComponent />, document.getElementById("root"));
	

El punto más crítico es sobre la línea 31.<div className={`App ${prefix}`} style={ {height: '100%'}}> Al cambiar al tema predeterminado, el divnombre de la clase de estilo de la representación App custom-defaultcambia.Al cambiar al tema oscuro, divel nombre de la clase de estilo de la representación está determinado por los pasos anteriores 1 y 2, respectivamente. App custom-dark.Compila los estilos correspondientes y . Estos dos estilos controlan principalmente el color de fondo y el color de la fuente, que están controlados por dos estilos respectivamente. El motivo es evitar la contaminación del estilo, es decir, si no se realiza ninguna modificación, el estilo en el archivo importado sobrescribirá el estilo en el archivo anterior. archivo importado . Para conocer otros principios, consulte el artículo: https://blog.csdn.net/m0_58016522/article/details/121751043custom-defaultcustom-darkbody .custom-defaultbody .custom-darkcssbodycssbody

efecto final

escribir al final

El principio principal de cambiar dinámicamente el tema predeterminado y el tema oscuro es similar al artículo anterior: ( https://blog.csdn.net/m0_58016522/article/details/121751043 ), puede consultarlo si lo necesita.
En el artículo anterior, la explicación de algunos conocimientos de front-end puede no ser muy profesional. (En realidad, soy un backend o(∩_∩)o)
El código completo se puede ver aquí: https://codesandbox.io/s/antd-change-style-dark-gjurt?file=/index.js

Enlace de referencia:
https://ant-design.gitee.io/docs/react/customize-theme-cn
https://blog.csdn.net/m0_58016522/article/details/121751043