react scss 换肤

React 和 SCSS 结合使用可以方便地实现应用的换肤功能，这通常涉及到以下几个步骤：

1. **样式模块化**：在 React 中，推荐使用 CSS-in-JS 或预处理器工具（如 styled-components、emotion 或 plain CSS modules）。SCSS 可以转换为模块化的 CSS，每个组件有自己的样式文件。

2. **变量管理**：创建一个全局的 SCSS 文件，定义主题颜色、字体等基础变量。例如：

   $primary-color: #007bff;
   $secondary-color: #6c757d;

3. **主题对象**：在 JavaScript 中创建一个主题对象，保存变量值，并暴露给整个项目访问：

   const theme = {
     primaryColor: '#007bff',
     secondaryColor: '#6c757d',
   };

4. **动态应用主题**：在组件中接收 `theme` 属性，然后使用它来渲染样式。比如使用 styled-components：

   import { css } from 'styled-components';
   
   const Button = ({ theme }) => (
     <button
       className={css`
         color: ${theme.primaryColor};
         background-color: ${theme.secondaryColor};
       `}
     />
   );

5. **切换主题**：为了改变主题，你可以提供一个设置主题的 API 或者状态管理工具（如 Redux、MobX 等），当用户选择新主题时更新主题对象。