主页 / 问题 / 1435218
Accepted
Виктория
Asked:2022-08-02 01:41:43 +0000 UTC2022-08-02 01:41:43 +0000 UTC

如何更改 MuiOutlinedInput 元素的笔触颜色

  • 772

有一个输入类型元素，我想在悬停时改变它的笔画，但是它没有改变，你能告诉我改变它吗？悬停颜色

  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;
reactjs material-ui

1 个回答

  1. Best Answer

    您需要创建一个主题上下文，然后在其中更改您需要的内容：

    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>

    • 1

相关问题