react绑定样式实现切换主题改变组件样式

在 React 中，可以通过绑定样式的方式实现切换主题改变组件样式的功能。具体实现步骤如下：

1. 定义样式

   在 LESS 或 CSS 文件中定义需要切换的样式，例如：

   // app.less
   .container {
     background-color: @primary-color;
     color: @text-color;
   }
    
   // dark.less
   .container {
     background-color: @dark-primary-color;
     color: @dark-text-color;
   }
   

   在这个示例代码中，定义了两种样式，分别为 app.less 和 dark.less，其中包含了 .container 样式类。

2. 在组件中定义状态

   在组件中使用 useState 定义一个名为 theme 的状态，用于保存当前主题：

   // App.js
   import React, { useState } from 'react';
   import './app.less';
   import './dark.less';
    
   function App() {
     const [theme, setTheme] = useState('app');
    
     const handleToggleTheme = () => {
       setTheme(theme === 'app' ? 'dark' : 'app');
     };
    
     return (
       <div className={theme}>
         <button onClick={handleToggleTheme}>Toggle themebutton>
         <div className="container">
           Hello, world!
         div>
       div>
     );
   }
    
   export default App;
   

   在这个示例代码中，使用 useState 定义了一个名为 theme 的状态，初始值为 'app'，并使用 setTheme 方法在点击按钮时切换主题。

3. 绑定样式

   在组件中使用条件渲染，根据当前主题绑定对应的样式：

   'app' ? 'container app' : 'container dark'}>
     Hello, world!