Блог

У меня есть следующий компонент в react:

component.js

 import styles from './styles.css';

const SomeComponent = (props) => {
    return <div className={`${styles["container"]}`}>Hey :D</div>
}

export default SomeComponent; 
 

styles.css

 @value container: #f5f5f5;

.container {
    background-color: red;
}

.unique-class {
    background-color: blue;
}
 

Как вы можете видеть, у меня есть значение и класс с одинаковым именем. Все работает нормально , если я это делаю styles["unique-class"] , я имею в виду, что я получаю преобразованное имя класса. Проблема возникает, когда я это делаю styles["container"] . В этом случае я получаю строку #f5f5f5 , что имеет смысл , потому что это значение значения container . Но то, что мне нужно, — это преобразованное имя класса .container !

Это часть конфигурации webpack, выполняющая преобразование:

             {
                test: /.css$/,
                exclude: [
                    path.resolve(__dirname, 'node_modules/@material'),
                    path.resolve(__dirname, 'node_modules/@rmwc'),
                    path.resolve(__dirname, 'node_modules/react-dual-listbox/lib/react-dual-listbox.css'),
                    path.resolve(__dirname, 'node_modules/react-image-lightbox/style.css'),
                    path.resolve(__dirname, 'web/js/src/modules/Common/styles/material.css'),
                ],
                use: [
                    { loader: 'style-loader' },
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                            modules: { localIdentName: '[path]___[name]__[local]___[hash:base64:5]' },
                        },
                    }],
            },
 

Я полагаю, что, возможно, есть способ получить доступ к значениям в styles переменной. Я не знаю, возможно ли это вообще, может быть, избежать @values попадания в styles переменную. А ты как думаешь?