[英]Unable to change border color when focused and not focused of Material UI Input
我不知道為什么我不能讓它工作。 我正在選擇MuiInputBase-root
元素,告訴它 select 字段並將邊框顏色設置為藍色,並在焦點上將邊框顏色設置為紅色。 我在這里做錯了什么?
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
)的特異性低於 class 選擇器,因此&.Mui-focused fieldset
沒有足夠的特異性來覆蓋默認的聚焦 styles 。 您可以使用 class 選擇器.MuiOutlinedInput-notchedOutline
代替fieldset
。
所以而不是:
root: {
"& .MuiInputBase-root": {
"& fieldset": {
borderColor: "blue"
},
"&.Mui-focused fieldset": {
borderColor: "red"
}
}
}
你應該有:
root: {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "blue"
},
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderColor: "red"
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.