Как заставить SCSS переопределить дочерние классы, используя конструкцию: local?

Я использую библиотеку AntDesign. Я беру оттуда компонент Select, заключаю его в блок и хочу переопределить некоторые классы. Вот как я это делаю:

select.tsx

import React  from "react";
import { Select } from 'antd';
import s from './style.scss';

const {Option} = Select;

export type SelectType = {
    showArrow: boolean;
    width: number;
}

export const SelectUser = (props: SelectType) => {
    const handleChange = (value: string) => {
    console.log(`selected ${value}`);
}

return (
    <div className={s.wrapper}>
        <Select
            defaultValue="lucy"
            style={{ width: props.width }}
            showArrow={props.showArrow}
            onChange={handleChange}
        >
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
            <Option value="Yiminghe">yiminghe</Option>
        </Select>
    </div>
)

}

select.scss

:local(.wrapper) {
   width: 100%;

   .ant-select-selection-item {
      color: red;
   }
}

webpack.config.js (loaders)

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

const JSLoader = {
    test: /.(js|ts)x?$/,
    use: {
        loader: 'babel-loader',
        options: {
            "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
        },
    },
    exclude: /node_modules/,
};

const StyleLoader = {
    test: /\.scss$/,
    use: [
        'style-loader',
        {
            loader: 'css-loader',
            options: {
                modules: {
                    localIdentName: '[folder]__[local]__[hash:base64:5]',
                    context: path.resolve(__dirname, 'module'),
                }
            }
        },
        'postcss-loader',
        'sass-loader',
    ],
};

const CssLoader = {
    test: /\.css$/,
    use: [
        'style-loader',
        'css-loader'
    ]
}

const ImageLoader = {
    test: /\.(png|svg|jpe?g|gif|jp2|webp)$/,
    loader: 'file-loader',
    options: {
        name: 'images/[name].[ext]'
    }
}

module.exports = {
    JSLoader,
    StyleLoader,
    CssLoader,
    ImageLoader
}

В результате он выполняет только ширину: 100%, а классы в AntDesign остаются неизменными. Подскажите плз, куда копать в данной ситуации?


Ответы (0 шт):