Recently, I delved into the world of JSS for styling and ran into an intriguing issue. My goal was to modify the color of a label in an InputLabel component when it is in focus state. After some tinkering, I managed to achieve this using the code snippet below. However, the real mystery lies in why it works:
import React from 'react'
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles'
import { FormControl, InputLabel, Select, } from '@material-ui/core/'
const styles = theme => ({
inputLabel: {
'&$focused': {
color: 'red',
},
},
focused: {
},
})
class Test extends React.Component {
render() {
const { classes } = this.props;
return(
<div>
<FormControl>
<InputLabel className={classes.inputLabel} FormLabelClasses={ classes }>Select</InputLabel>
<Select/>
</FormControl>
</div>
)
}
}
Test.propTypes = {
classes: PropTypes.object.isRequired,
}
export default withStyles(styles)(Test)
The main confusion lies in my inability to directly set the color to red within the outer focused field. Additionally, the usage of &$focused raises questions as I initially assumed it simply referenced the outer focused field. If that's the case, why doesn't setting the outer focused field to { color: 'red' } work? Removing the outer focused field also negates the red color effect. Why is it necessary? The purpose of passing classes to FormLabelClasses remains elusive, especially since omitting it disrupts the red focused label appearance.