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

Question

我正在尝试更改 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

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

Answer 1

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

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

编辑： 更新了沙箱以从 Chrome

中删除轮廓

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

 outline: "none"

第二次编辑：

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

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

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

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

Styling textarea in MUI using Styled Components

css

reactjs

material-ui