Как добавить имена классов из менее с помощью веб-пакета и реагировать? - PullRequest
Новая
       32

Как добавить имена классов из менее с помощью веб-пакета и реагировать?

0 голосов
/ 12 июня 2019

У меня есть конфигурация webpack, которая использует less-loader, css-loader и style-loader.Когда я импортирую меньше файлов в свой файл компонента, css отображается в devTools chrome, но имя класса - нет.

У меня есть google'd в течение нескольких часов, и я не могу найти ничего, что можетобъясни это.Я знаю, что должен использовать this.props.className, но я не уверен, как будет распространяться className.Я также пытался использовать статические строки для className.

Вот мой конфиг веб-пакета: 

module: {
    rules: [
        ...
        {
            test: /\.less$/,
            use: [
                'style-loader',
                'css-loader',
                'less-loader'
            ]
        }
    ]
},

Вот мой компонент: 

import React from 'react';
import {AppBar} from '@material-ui/core';
import '../styles/layout.less';

class Home extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <AppBar className='header'></AppBar>
        );
    }
}

export default Home;

Я ожидаю classNameбыть заголовком, но он не показывает имена классов, которые я предоставляю.Это происходит только с компонентами Material-UI.

...