Как переопределить тот же класс CSS в ReactJS, используя загрузчик css-mui, как стандартный CSS - PullRequest
Новая
       10

Как переопределить тот же класс CSS в ReactJS, используя загрузчик css-mui, как стандартный CSS

0 голосов
/ 30 ноября 2018

Я очень новичок в Материальном дизайне.В настоящее время я изучаю Material UI с ReactJS.В основном я пытаюсь повторить то же поведение, что и стандартное поведение CSS.Пожалуйста, найдите мою проблему ниже,

Я использовал https://www.npmjs.com/package/css-to-mui-loader

Я создал файл CSS как (styles.css) ниже, 

.button {
background: $(theme.palette.secondary.main);
padding: 2su; /* Material UI spacing units */
}

.button:hover {
background: $(theme.palette.primary.light);
}

.button {
background: #f08373;
padding: 3su; /* Material UI spacing units */
text-transform: lowercase;
}

Мой код реакции, как показано ниже, 

import React from 'react'
import Button from '@material-ui/core/Button';
import { withStyles } from '@material-ui/core/styles';
import style from './style.css';
import classNames from 'classnames'

const MyComponent = (props) =>{
const { classes} = props
console.log(classes)
return(
<Button className={classNames(classes.button, classes.label)}>
Click Me

)
}

export default withStyles(style)(MyComponent)

Когда я пытаюсь запустить свой код, я получаю сообщение об ошибке типа

Не удалось скомпилировать.

. / Src / MyComponent.js Попытка ошибки импорта: «./style.css» не содержит экспорт по умолчанию (импортируется как «стиль»).

Здесь я пытаюсь переопределить имя класса css .button.Компилятор выдает ошибку.

Когда я изменил тот же CSS, как показано ниже, 

.button {
background: $(theme.palette.secondary.main);
padding: 2su; /* Material UI spacing units */
}

.button:hover {
background: $(theme.palette.primary.light);
}

.button {
text-transform: lowercase;
}

Загрузчик css-to-mui Успешно объединил два класса .button в один.

Не могли бы вы помочь мне переопределить имя класса css, используя загрузчик css-to-mui

Ответы [ 2 ]

0 голосов
/ 04 декабря 2018

Я опубликовал ту же проблему в GitHub.Владелец библиотеки css-to-mui-loader исправил проблему и выпустил новую версию.Пожалуйста, найдите ссылку ниже для более подробной информации.

загрузчик css-to-mui / выпуск

0 голосов
/ 30 ноября 2018

При импорте файлов css вы не импортируете его как модуль, но выполняете следующие действия: 

import './myStyle.css';

Дайте мне знать, если это поможет, и если у вас есть еще вопросы.

...