使用样式化组件在 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"
}
我更新了沙箱以反映这一点
我正在尝试更改 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"
}
我更新了沙箱以反映这一点