React + Antd realiza la función de tema de cambio dinámico
prefacio
Recientemente, fui al sitio web oficial de ant design para verificar la información y descubrí que la última versión de ant design se ha actualizado 4.17.x, así que eché un vistazo a 4.17.xlos registros de actualización de las últimas versiones y descubrí que 4.17.0la versión tiene actualicé mucho contenido ( haga clic para ver el registro de actualización de la versión 4.17.0 ), en Una de las cosas que me llamó la atención es la realización de la función de tema dinámico. Sin embargo, si hace clic en el documento del tema dinámico, se marca como una función experimental, lo que realmente es una vergüenza mayúscula. . .
En 4.17.0la versión anterior el método de implementar temas dinámicos era engorroso (tal vez era un ignorante), y generalmente se lograba modificando la variable menos, personalmente creo que es bastante engorroso. Después 4.17.0de la versión, el funcionario comenzó a apoyar la función de cambiar de tema dinámicamente, lo que me hizo sentir más aliviado.
Precauciones
El siguiente es un extracto de la descripción del documento oficial:
- Esta función se realiza modificando dinámicamente la variable CSS, por lo que la página no se mostrará normalmente en IE. Confirme si su entorno de usuario necesita admitir IE.
- Esta característica es compatible desde la versión [email protected].
Principio de realización
La función de cambiar dinámicamente los temas es ConfigProviderestablecer un prefijo de estilo unificado a través de la configuración global. Para obtener ConfigProviderdocumentos relacionados específicos, consulte aquí: https://ant-design.gitee.io/components/config-provider-cn/#API .
Por ejemplo, el control del botón antd, después de que el parámetro typese establezca en 'primary', se agregará después de la representación real class="ant-btn ant-btn-primary", en la que ant-btn-primaryel estilo controla el color de fondo y el color de la línea del borde del botón. Como se muestra en la siguiente figura: 
Para el nombre de la clase ant-btny ant-btn-primary, antde hecho, como prefijo del estilo. Y si reemplazamos dinámicamente el prefijo en el nombre de la clase de estilo con otras cadenas, podemos lograr el efecto de cambio de tema.
Implementación
-
Según la documentación oficial, modificando
ConfigProfideren el nivel superiorprefixCls:import { ConfigProvider } from 'antd'; export default () => ( <ConfigProvider prefixCls="custom"> <MyApp /> </ConfigProvider> ); -
Compilar menos
Porque en el paso 1, alConfigProfiderajustar el prefijo del nombre de la clase de estilo acustom, necesitamos volver a compilar el archivo predeterminado de estilo menos de antd para generar un archivo css a través del comando lessc. ※ Nota: si menos no está instalado, debe instalar menos:npm install -g lesslessc --modify-var="ant-prefix=custom" node_modules/antd/dist/antd.variable.less custom.cssSi simplemente ejecuta el comando anterior de acuerdo con la operación en el documento oficial, la consola informará un error:
SyntaxError: Inline JavaScript is not enabled. Is it set in your options? in D:\workspace\workspace_for_java\SPB-LERN\web-react-ts\node_modules\antd\lib\style\color\bezierEasing.less on line 110, column 1: 109 // https://github.com/ant-design/ant-motion/issues/44 110 .bezierEasingMixin(); 111Debido a que el comando lessc predeterminado no habilita la función javascript, debe habilitar la función javascript a través de parámetros, consulte el enlace: https://lesscss.org/usage/#less-options-enable-inline-javascript-deprecated- . Agregue
--jsparámetros al comando anterior y ejecute:lessc --js --modify-var="ant-prefix=custom" node_modules/antd/dist/antd.variable.less custom.css -
Se generará uno de acuerdo con el comando del paso 2.
custom.cssDado que el archivo es demasiado grande, se interceptan algunos párrafos de la siguiente manera:html { --custom-primary-color: #1890ff; --custom-primary-color-hover: #40a9ff; --custom-primary-color-active: #096dd9; --custom-primary-color-outline: rgba(24, 144, 255, 0.2); --custom-primary-1: #e6f7ff; --custom-primary-2: #bae7ff; --custom-primary-3: #91d5ff; --custom-primary-4: #69c0ff; --custom-primary-5: #40a9ff; --custom-primary-6: #1890ff; --custom-primary-7: #096dd9; --custom-primary-color-deprecated-pure: ; --custom-primary-color-deprecated-l-35: #cbe6ff; --custom-primary-color-deprecated-l-20: #7ec1ff; --custom-primary-color-deprecated-t-20: #46a6ff; --custom-primary-color-deprecated-t-50: #8cc8ff; --custom-primary-color-deprecated-f-12: rgba(24, 144, 255, 0.12); --custom-primary-color-active-deprecated-f-30: rgba(230, 247, 255, 0.3); --custom-primary-color-active-deprecated-d-02: #dcf4ff; /* 以下内容略去 */Entre ellos, el color en la segunda línea
--custom-primary-colores el color de muestra principal, el predeterminado es el azul predeterminado de antd, que se usa para probar el efecto, podemos cambiar el color a rojo:html { --custom-primary-color: #ff0000;/* 修改为红色 */ --custom-primary-color-hover: #40a9ff; -
index.jsArchivo importa los archivos de los pasos anteriorescustom.css. ※Nota: El archivo de estilo antd predeterminadoantd/dist/antd.csstambién debe importarse.index.jsEl código completo del archivo es el siguiente:import React, { useState } from "react"; import ReactDOM from "react-dom"; import { Button, DatePicker, Radio, Space, version } from "antd"; import { ConfigProvider } from "antd"; import "antd/dist/antd.css"; // antd默认样式文件 import "./custom.css"; // 修改后的样式文件 import "./index.css"; const TestComponent = () => { const [prefix, setPrefix] = useState("ant"); const handlePrefixChange = (e) => { setPrefix(e.target.value); }; return ( // ConfigProvider修改prefixCls <ConfigProvider prefixCls={ prefix}> <div className="App"> <h1> <Space> Change Theme: { /* radio动态修改prefix */} <Radio.Group onChange={ handlePrefixChange} value={ prefix}> <Radio value="ant">Ant Style</Radio> <Radio value="custom">Custom Style</Radio> </Radio.Group> </Space> </h1> <h1>antd version: { version}</h1> <DatePicker /> <Button type="primary" style={ { marginLeft: 8 }}> Primary Button </Button> </div> </ConfigProvider> ); }; ReactDOM.render(<TestComponent />, document.getElementById("root"));
efecto final
En la figura anterior, podemos ver que cuando el botón de radio selecciona el estilo ant, el color del tema de la representación de la página es el azul predeterminado de ant en este momento, y después de que la radio selecciona el estilo personalizado, el color del tema de la representación de la página se ha cambiado dinámicamente a nuestro rojo modificado. A través de la ventana de depuración del navegador, podemos encontrar que el prefijo del nombre de la clase del botón es antDespués de seleccionar el estilo personalizado, el prefijo del nombre de la clase se cambia a custom.
escribir al final
Desde entonces, hemos logrado el efecto de cambiar de tema dinámicamente.
Haga clic aquí para ver el código completo del proyecto: https://codesandbox.io/s/antd-change-style-8rb12?file=/index.js
Además, algunas personas pueden tener la necesidad de cambiar dinámicamente entre el tema predeterminado y el tema oscuro, puede consultar este artículo: https://blog.csdn.net/m0_58016522/article/details/122067153
Enlace de referencia:
https://ant-design.gitee.io/changelog-cn
https://ant-design.gitee.io/docs/react/customize-theme-variable-cn
Lectura extendida:
https://blog.csdn.net/m0_58016522/article/details/119104454