Могу ли я переопределить Material-UI с помощью модулей css в create-react-app v2?
Например, я хочу добавить к этой кнопке верхний край.
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;
}
Можно ли использовать этот метод вместо переопределения, как в инструкции на официальной странице material-ui?
Ответы 3
В моем недавнем проекте я делал такие вещи, как
import './style.css';
где это пример содержимого style.css
.detailbox-paper {
width: 90vw;
margin: 20px auto 0px auto;
}
где я использовал его, используя className для такого элемента
<Paper className = "detailbox-paper">
и это сработало. При таком подходе следует помнить об особенностях css, с которыми вы начинаете бороться.
Вы также можете использовать встроенный styles = {{}} с синтаксисом camelCase для атрибутов. Но, насколько мне известно, встроенные стили всегда будут установлены, кроме ключевого слова !important.
Надеюсь, это поможет вам в вашем путешествии.
это проблема специфичности css, вам понадобится больший вес или важный. взгляните на smashingmagazine.com/2007/07/…, если вы этого еще не знаете ;-)
после добавления! important теперь все работает. Большое спасибо, совсем забыл про указанные проблемы. Ваш ответ действительно помогает XD
Если у вас возникли проблемы со спецификой, загляните в раздел «внутренние состояния» ниже material-ui.com/customization/overrides/….
да, это определенно работает, но вы должны знать, что этот подход создает глобальные стили, а не стили с локальной областью действия (модули CSS)
Да, ты можешь.
Используйте className, как обычно, с CRA.
Этот объяснит, как использовать модули CSS. Это просто.
Однако после выполнения вышеупомянутой вещи у меня возникла проблема с переопределением моего CSS с помощью MaterialUI CSS. Итак, нам нужно изменить порядок Styleinjection.
Этот объясняет, как это можно сделать.
Здесь - песочница с рабочим образцом.
Песочница больше не работает для MUI 5.0, решение для v5: github.com/mui-org/material-ui/issues/24109
Просто используйте компонент StylesProvider со свойством injectFirst:
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { StylesProvider } from "@material-ui/core/styles" // <-- import this component, and wrap your App.
ReactDOM.render(
<StylesProvider injectFirst>
<App />
</StylesProvider>,
document.getElementById('root')
)
Это проблема специфики CSS, при которой ваш CSS загружается до стилей пользовательского интерфейса материала и, следовательно, ими переопределяется. Как указано в документы относительно свойства injectFirst:
By default, the styles are injected last in the element of the page. As a result, they gain more specificity than any other style sheet. If you want to override Material-UI's styles, set this prop.
да, я использовал встроенный стиль, и он работает. Я также могу переопределить компонент <Paper> с помощью внешнего CSS, но каким-то образом компонент Button не применяет мой стиль