CSS модуль не работает в реакции 16.13.1 - PullRequest
Новая
       54

CSS модуль не работает в реакции 16.13.1

0 голосов
/ 25 апреля 2020

Я хочу стилизовать компоненты в реакции JS. Я попробовал несколько способов сделать это. Когда я пытаюсь создать объект CSS и применить его к компоненту в том же файле JS, он работает. Но когда я пытаюсь применить CSS из внешнего CSS файла и импортировать его в файл JS, он не работает. И я также попытался сохранить этот файл как filename.module.css. Но это мне не помогло.

Список установленных узловых модулей и их версий приведен ниже. 

> @material-ui/core@4.9.11
> @material-ui/icons@4.9.1
> firebase@7.14.1
> react@16.13.1
> react-dom@16.13.1
> react-router-dom@5.1.2
> react-scripts@3.4.1

В webpack.config.js файле модуля react-script, который я нашел ниже code: 

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

Итак, я предполагаю, что мой реактивный проект поддерживает файлы CSS, а также файлы S CSS и SASS. Правильно ли я понял?

header.module.css file: 

.heading {
    color: '#3592EF';
    font-weight: '600';
    letter-spacing: '2px';
}
.navButton {
    color: '#444';
    font-size: '16px';
    padding: '4px 8px';
    margin: 'auto';
    margin-right: '15px';
}

Header.js file: 

import React from 'react';
import { Button } from '@material-ui/core';
import styles from './header.module.css';

export default class Header extends React.Component {
    render() {
        return (
            <div>
                <span className={styles.headling}>Heading element</span>
                <Button className={styles.navButton}>Home</Button>
                <Button className={styles.navButton}>About</Button>
            </div>
        );
    }
}

Вывод идет с элементом Heading и Home, О кнопке. Но без стиля CSS.

Как я могу решить эту проблему?

Спасибо.

1 Ответ

1 голос
/ 25 апреля 2020

Обычно пользовательские компоненты не принимают свойство className, если оно не распространяется на внутреннюю часть компонента. Посмотрите в материале пользовательский интерфейс реагировать на компоненты кнопки, этот компонент не может иметь свойство className. https://material-ui.com/components/buttons/ Это означает, что вы не можете его использовать. Чтобы убедить себя, попытайтесь использовать общий html <button>, и это сработает, вы видите. Изменить: грамматика

...