javascript - Material UI Input 的焦点和不焦点时无法更改边框颜色
问题描述
我不知道为什么我不能让它工作。我正在选择MuiInputBase-root
元素,告诉它选择字段并将边框颜色设置为蓝色,并在焦点上将边框颜色设置为红色。我在这里做错了什么?
import React from "react";
import "./styles.css";
import { makeStyles } from "@material-ui/core/styles";
import FormControl from "@material-ui/core/FormControl";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import InputLabel from "@material-ui/core/InputLabel";
const useStyles = makeStyles(theme => ({
root: {
width: "20rem"
},
label: {
background: "white",
paddingRight: theme.spacing(0.5),
"&.Mui-focused": {
color: theme.palette.secondary.main
}
},
closeIcon: {
color: theme.palette.grey[400],
"&.hidden": {
display: "none"
}
},
searchIcon: {
color: theme.palette.primary.main
}
}));
const useOutlinedInputStyles = makeStyles({
root: {
"& .MuiInputBase-root": {
"& fieldset": {
borderColor: "blue"
},
"&.Mui-focused fieldset": {
borderColor: "red"
}
}
}
});
export default function App() {
const classes = useStyles();
const outlinedInputStyles = useOutlinedInputStyles();
return (
<div className="App">
<FormControl className={classes.root} variant="outlined">
<InputLabel className={classes.label} htmlFor="search-input">
placeholder
</InputLabel>
<OutlinedInput
classes={outlinedInputStyles}
id="search-input"
labelWidth={70}
/>
</FormControl>
</div>
);
}
解决方案
问题是.MuiInputBase-root
不是根元素(.MuiOutlinedInput-root
元素)的子元素,它实际上是完全相同的元素,因此该层是不必要的。此外,类型选择器(例如fieldset
)的特异性低于类选择器,因此&.Mui-focused fieldset
没有足够的特异性来覆盖默认的焦点样式。而不是fieldset
你可以使用类选择器.MuiOutlinedInput-notchedOutline
。
所以而不是:
root: {
"& .MuiInputBase-root": {
"& fieldset": {
borderColor: "blue"
},
"&.Mui-focused fieldset": {
borderColor: "red"
}
}
}
你应该有:
root: {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "blue"
},
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderColor: "red"
}
}
推荐阅读
- makefile - 为什么 CMake 会删除我的 add_custom_command 源文件
- mysql - 如何使用 NodeJS 更新数据?
- ruby - URI 只能是 ascii
- javascript - 页面刷新后如何停止计时器重置
- reactjs - 我的 onchange 方法在反应中不起作用
- botframework - “无法发布活动。未经授权”从 Bot Emulator 进行测试时
- javascript - Angular 中的按钮单击事件没有响应
- css - 为什么是
- 填充设置为零时开箱即用?
- python - 函数未返回正确数量的观察值
- node.js - 如何隐藏第三方 api 获取请求以与 nginx 做出反应