React scss 修改 第三方组件样式

在React中使用SCSS并修改第三方组件样式，你可以采取以下几个步骤：

1. **安装依赖**:
如果项目尚未安装`scss-loader`和`style-resources-loader`（用于加载自定义CSS模块），可以运行以下命令安装它们：

   npm install --save-dev sass-loader style-resources-loader

2. **配置`webpack.config.js`**:
在`webpack.config.js`中添加对`style-resources-loader`的支持，以便加载你的设计变量文件（如`.scss`文件）：

   module.exports = {
     // ...
     module: {
       rules: [
         // ...
         {
           test: /\.scss$/,
           use: [
             'style-loader',
             'css-loader',
             'postcss-loader',
             'resolve-url-loader',
             'sass-loader',
             'style-resources-loader',
           ],
           include: path.resolve(__dirname, 'src'),
         },
         // ...
       ],
     },
     // 添加或更新以下配置以加载你的设计变量
     resolve: {
       extensions: ['.js', '.jsx', '.ts', '.tsx', '.scss'],
       modules: ['node_modules', 'src'],
     },
     // ...
   };

然后，在`src`目录下创建一个名为`variables.scss`的文件，保存你的设计变量（如颜色、间距等）。

3. **导入变量到`index.js`**:
如引用[2]所示，你可以导入设计变量并在组件中使用它们：

   import React from 'react';
   import { Button, DatePicker, theme } from 'antd';
   import './variables.scss'; // 引入设计变量

   export default function Index() {
     // 调用theme的useToken()获取当前主题下的Design Token
     const { token } = theme.useToken();

     return (
       <div>
         <Button type="primary">我是来自antd的按钮</Button>
         <DatePicker />
         {/* 使用变量 */}
         <div style={{ color: token.colorPrimary }}>hello,xiaotong</div>
       </div>
     );
   }

4. **修改第三方组件样式**:
对于第三方组件，如果其样式暴露了可修改的CSS类名（通常是通过类名或内联样式），你可以在自己的CSS模块中覆盖这些类。比如，假设有一个第三方组件的按钮类名为`.custom-button`，你可以在`variables.scss`或另一个CSS模块中定义新的样式：

   .custom-button {
     background-color: $primaryColor;
     /* 其他修改 */
   }

记得在实际应用中替换上述示例中的变量名称和路径，以匹配你的具体需求。