Могу ли я переопределить Material-UI модулями css в create-реагировать-приложение v2? - PullRequest
Новая
       41

Могу ли я переопределить Material-UI модулями css в create-реагировать-приложение v2?

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

Например, я хочу добавить к этой кнопке поле margin-top 

import classes from 'button.module.css';
        <Button 
          type="submit"
          variant="contained"
          color="primary"
          fullWidth
          disabled={this.props.isLoading}
          className={classes.Button}
        >
          {this.props.isLoading ? <CircularProgress size={20}/> : 'SIGN IN'}
        </Button>

В файле button.module.css 

.Button {
  margin-top: 15px;
}

Можно ли использовать этот метод вместо переопределения, как инструкция на официальной странице материала?

Ответы [ 2 ]

0 голосов
/ 19 июля 2019

Да, вы можете.

Используйте className, как вы обычно делаете с CRA.

В этом объясняется, как использовать модули CSS. Это просто.

Однако после выполнения вышеупомянутой вещи у меня возникла проблема с переопределением моего CSS из-за MaterialUI CSS. Поэтому нам нужно изменить порядок ввода стилей.

Это объясняет, как вы можете это сделать.

Здесь - песочница с рабочим образцом.

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

В моем недавнем проекте я делал такие вещи, как

import './style.css';

где это пример содержимого style.css 

.detailbox-paper {
  width: 90vw;
  margin: 20px auto 0px auto;
}

где я использовал его, используя className для такого элемента, как этот <Paper className="detailbox-paper"> и это сработало. При таком подходе следует помнить одну вещь: специфичность css, с которой вы начинаете бороться.

Вы также можете использовать встроенный styles={{}} с синтаксисом camelCase для атрибутов. Но, насколько я знаю, встроенные стили всегда будут установлены, кроме ключевого слова !important.

Надеюсь, это поможет вам в вашем путешествии.

...