Как заставить 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 остаются неизменными. Подскажите плз, куда копать в данной ситуации?