I want to change the hover color to red. Wrote a topic for this element does not respond, how to fix it? it turns out it goes dark by default, I want to change it to another color, for example, red, but it doesn't work enter image description here

  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;

推荐答案

您可以这样做:

const theme = createTheme({
  components: {
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          "&:hover .MuiOutlinedInput-notchedOutline": {
            borderColor: "#ff0000"
          },
          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
            borderColor: "#ff0000"
          }
        }
      }
    }
  }
});

Working example

$notchedOutline美元对我不起作用.

Reactjs相关问答推荐

单击按钮时在子元素中不显示任何内容-react

以下代码是否存在安全问题?

Next.js:提交表单时状态尚未就绪

为什么我的react虚拟化列表不显示滚动条,除非我确保高度低于rowCount*rowHeight?

捕获表单数据时的Reactjs问题

在Map()完成React.js中的多个垃圾API请求后执行函数

如何从react 18-nextjs 14应用程序路由中的客户端组件呈现服务器组件?

如何解决Reaction中遗留的上下文API错误?

点击页脚链接时,如何更改ReactJS导航栏中的活动菜单项(样式为Tailwind CSS)?

Gitlab CI和VITE环境变量出现问题

React redux 工具包 useGetFilterProductsQuery 和 useGetFilterProductsByCategoriesQuery 未定义为函数

如何测试根据 prop 更改 CSS 属性的 useEffect 钩子?

React useContext 的未定义返回值

Material UI v5.11 - Prop sx 在响应式中写了两次

表单错误后 Ionic React 无法 Select 单选按钮

如何避免在 react useEffect 上滚动时出现小的延迟?

React JS:如何判断用户使用的是浏览器 url 还是桌面 electron

如何解决在 react.js 中找不到模块错误

使用 React、Redux 和 Firebase 的无限循环

在渲染不显示子元素之后,再次渲染时,子元素状态数据完全消失了.为什么会这样以及如何防止它发生?