问题
If you look at the components here: https://material-ui.com/components/selects/, you'll see that when clicked, the label moves up and minimizes but also changes color (along with the border / line at the bottom that defines the text).
I figured out how to change all the colors EXCEPT the text that minimizes when clicked or focused. If someone can please help me. It's driving me nuts
Bonus Points if you can explain how you got to this conclusion so I can learn how to do this myself as well.
const useStyles = makeStyles(theme => ({
root: {
display: 'flex',
flexWrap: 'wrap',
},
formControl: {
margin: theme.spacing(1),
minWidth: 120,
},
inputLabel: {
color: 'lightgray',
focused: {
color: 'orange' // does not work
}
},
select: {
color: 'white',
'&:before': { // changes the bottom textbox border when not focused
borderColor: 'red',
},
'&:after': { // changes the bottom textbox border when clicked/focused. thought it would be the same with input label
borderColor: 'green',
}
}
}));
<FormControl className={classes.formControl}>
<InputLabel
className={classes.inputLabel}
>Number of Lists</InputLabel>
<Select
className={classes.select}
value={values.age}
onChange={handleChange}
inputProps={{
name: 'age',
id: 'age-simple',
}}
>
<MenuItem value={1}>One</MenuItem>
<MenuItem value={2}>Two</MenuItem>
</Select>
</FormControl>
回答1:
You can achieve this with the following (assuming Material-UI v4 or later):
inputLabel: {
color: "lightgray",
"&.Mui-focused": {
color: "orange"
}
},
Here's the relevant documentation: https://material-ui.com/customization/components/#pseudo-classes
Prior to version 4 you would need something like:
// This is similar to Brad Ball's answer, but this nested syntax ensures proper specificity for the focused CSS.
inputLabel: {
color: "lightgray",
"&$inputFocused": {
color: "orange"
}
},
inputFocused: {}
// then in the JSX:
<InputLabel
className={classes.inputLabel}
classes={{ focused: classes.inputFocused }}
>
回答2:
Here is the syntax for using focused:
const useStyles = makeStyles(theme => ({
root: {
display: "flex",
flexWrap: "wrap"
},
formControl: {
margin: theme.spacing(1),
minWidth: 120
},
inputLabel: {
color: "lightgray"
},
inputFocused: {
color: "orange" // does not work
},
select: {
color: "white",
"&:before": {
// changes the bottom textbox border when not focused
borderColor: "red"
},
"&:after": {
// changes the bottom textbox border when clicked/focused. thought it would be the same with input label
borderColor: "green"
}
}
}));
<FormControl className={classes.formControl}>
<InputLabel
className={classes.inputLabel}
classes={{ focused: classes.inputFocused }}
>
Number of Lists
</InputLabel>
<Select
className={classes.select}
value={values.age}
onChange={handleChange}
inputProps={{
name: "age",
id: "age-simple"
}}
>
<MenuItem value={1}>One</MenuItem>
<MenuItem value={2}>Two</MenuItem>
</Select>
</FormControl>;
来源:https://stackoverflow.com/questions/56639689/change-inputlabel-color-of-a-select-component-when-clicked-focused