使用样式化组件在 MUI 中样式化文本区域

Styling textarea in MUI using Styled Components

我正在尝试更改 MUI 中文本区域组件焦点的边框颜色。我正在使用样式组件:

import "./styles.css";
import { styled } from "@mui/material/styles";

const TextAreaStyle = styled("textarea")(({ theme }) => ({
  border: `2px solid #F9FAFB`,
  width: "100%",
  flexGrow: 1,
  boxSizing: "border-box",
  borderRadius: 3,
  backgroundColor: "#f8f8f8",
  // font-size: 16px;
  resize: "none",
  "&:focus": {
    border: `2px solid #454F5B`
  },
  "&:hover": {
    border: `2px solid #F4F6F8`
  }
}));

export default function App() {
  return (
    <div className="App">
      <TextAreaStyle />
    </div>
  );
}

沙盒:https://codesandbox.io/s/youthful-sammet-qhsfqf?file=/src/App.js

但是,当悬停有效时,焦点不起作用。边框颜色仍然看起来像默认颜色。有人能指出我正确的方向吗?

您的代码可以正常工作,只是您的颜色太浅并且与默认颜色相似。看看:

https://codesandbox.io/s/cranky-leakey-mtfutl

编辑: 更新了沙箱以从 Chrome

中删除轮廓

要删除某些浏览器具有的大纲,您只需要做

 outline: "none"

第二次编辑:

要在悬停时显示焦点边框,只需更改样式的顺序,焦点最后:

"&:hover": {
    border: `2px solid #FF0000`
  },
"&:focus": {
    border: `2px solid #0FF00F`,
    outline: "none"
  }

我更新了沙箱以反映这一点