Блог

Главная - Вопросы по программированию - Как переопределить стили, используя знак доллара ($) в MUI 5?

Как переопределить стили, используя знак доллара ($) в MUI 5?

#reactjs #material-ui #jss

Вопрос:

Приведенный ниже код взят из MUI 5, с решением MUI 4 для изменения поля ввода при наведении курсора мыши. Но это, очевидно, не работает, интересно, как добиться этого в MUI 5, кажется, не может изменить цвет TextField при наведении. Это делается с помощью createTheme in MUI 5

 components: {
  MuiInputLabel: {
    styleOverrides: {
      root: {
        color: arcBlue,
        fontSize: '1rem',
      },
    },
  },
  MuiInput: {
    styleOverrides: {
      underline: {
        'amp;:before': {
          borderBottom: `2px solid ${arcBlue}`,
        },
        // Code from material ui 4
        'amp;:hover:not($disabled):not($focused):not($error):before': {
          borderBottom: `2px solid ${arcGrey}`,
        },
      },
    },
  },
},

Ответ №1:

$ Синтаксис — это функция из JSS, в MUI v5 они переключаются на emotion, поэтому он больше не работает, теперь у вас есть 2 варианта:

Используйте обычную строку

В этом разделе вы можете увидеть список имен классов, описывающих различные состояния компонентов MUI:

Состояние Глобальное имя класса
активный .Mui-active
проверено .Mui-checked
Завершено .Mui-completed
отключено .Mui-disabled
ошибка .Mui-error
расширенный .Mui-expanded
виден фокус .Mui-focusVisible
сфокусированный .Mui-focused
требуется .Mui-required
выбранный .Mui-selected 
 'amp;amp;:hover:not(.Mui-disabled):not(.Mui-error):before': {
  borderBottom: `5px solid purple`
}

Используйте константу

Большинство компонентов MUI имеют свои собственные константы класса, если вы не хотите жестко кодировать имя класса:

 import { [component]Classes } from "@mui/material/[Component]";
import { inputClasses } from "@mui/material/Input";
 
 [`amp;amp;:hover:not(${inputClasses.disabled}):not(${inputClasses.focused}):before`]: {
  borderBottom: `5px solid purple`
}

Демонстрация Codesandbox

Ссылка

Комментарии:

1. Большое вам спасибо. Я ценю это. Это сработало

2. @DiegoFranco, также обратите внимание, что вам нужно удвоить амперсанд amp;amp; , чтобы повысить специфичность CSS в вашем конкретном случае, в противном случае он переопределяется стилями MUI.

3. спасибо, чувак. Ценю это.

Метки: