Как мне переопределить наведение надрезом Outline для OutlinedInput

Question

Я обновил с версии 3 пользовательского интерфейса материала до 4 и хотел бы переопределить: .MuiOutlinedInput-root: hover .MuiOutlinedInput-notchedOutline

, так как я думаю, что это обновление представляет состояние наведения, которое меняет мой текущий пользовательский интерфейс.

Я использовал createMuiTheme ()

и попробовал следующее, но ни один из них не сработал:

MuiOutlinedInput: {
    root: {
        '&:hover': {
            '&$notchedOutline': {
                borderColor: '#f00',
            }
        },
    },
}


MuiOutlinedInput: {
    root: {
        '&$hover $notchedOutline': {
            borderColor: '#f00',
        },
    },
}

что я делаю не так, надеюсь, кто-то может помочь

Answer 1

Вы были довольно близко.Правильный синтаксис представляет собой комбинацию аспектов из ваших двух попыток.

Состояние "hover" управляется через псевдокласс ": hover" (это , а не имя правила, на которое ссылаютсяво втором примере с $hover), поэтому в первом примере правильно используется &:hover, чтобы соответствовать состоянию наведения ввода;однако класс $notchedOutline применяется к потомку корневого элемента (, а не самого корневого элемента), поэтому вам нужно пространство между корневой ссылкой и ссылкой $notchedOutline, как во втором примере.

Вот рабочий пример:

import React from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
const theme = createMuiTheme({
  overrides: {
    MuiOutlinedInput: {
      root: {
        "& $notchedOutline": {
          borderColor: "green"
        },
        "&:hover $notchedOutline": {
          borderColor: "red"
        },
        "&$focused $notchedOutline": {
          borderColor: "purple"
        }
      }
    }
  }
});
function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <TextField variant="outlined" defaultValue="My Text" />
    </MuiThemeProvider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Связанные ответы:

• Изменить схему для OutlinedInput с React material-ui
• Глобальное переопределенное обрисованное значение
• Невозможно изменить цвет границы Material-UI OutlinedInput