2

Есть элемент типа 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;

1 ответ 1

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/material@5.9.3/umd/material-ui.production.min.js"></script>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.