Как поменять цвет обводки у элемента MuiOutlinedInput

Question

Есть элемент типа input, хочу изменить у него обводку при наведение, но она не меняется можете подсказать её изменить? цвет при hover

  MuiOutlinedInput: {
      styleOverrides: {
        root: {
          "& $notchedOutline": {
            borderColor: "#ff0000",
          },
          "&:hover $notchedOutline": {
            borderColor: "#ff0000",
          },
          "&$focused $notchedOutline": {
            borderWidth: 0,
          },
        },
      },
    },


import OutlinedInput from "@mui/material/OutlinedInput";

const Search = () => {
  return (
    <>
      <OutlinedInput />
    </>
  );
};

export default Search;

Answer 1

Вам надо создать контекст темы и потом уже в нём менять то что вам надо:

const {
  OutlinedInput,
  createTheme,
  ThemeProvider
} = MaterialUI;

const theme = createTheme({
  components: {
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          '&:hover': {
            backgroundColor: 'blue',
            '.MuiOutlinedInput-notchedOutline': {
              borderColor: 'red',
              borderWidth: '8px',
            }
          },
          '.MuiOutlinedInput-notchedOutline': {
            borderColor: 'green',
            borderWidth: '4px',
          }
        },
      },
    },
  },
});

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <OutlinedInput />
    </ThemeProvider>
  )
}


ReactDOM.render(<App />, document.querySelector('#root'));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@mui/[email protected]/umd/material-ui.production.min.js"></script>

БЛОГ НА HUSL

Как поменять цвет обводки у элемента MuiOutlinedInput

Ответы (1 шт):