使用样式化组件在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"
}

我更新了沙盒以反映