In my development work with React, I initially utilized inline styling to customize the appearance of material-UI components. However, I have come to realize that utilizing CSS provides a more structured and efficient approach to styling components. Despite reviewing all available documentation in the material-ui user guides, I have been unable to find a solution.
Current Code:
const useStyles = theme => ({
input: {
color: '#000',
fontSize: "14px",
},
});
Implementation within render method of Class component:
const { classes } = this.props;
<TextField
InputProps={{
className: classes.input
}}
InputLabelProps={{
className: classes.input
}}
/>
export default withStyles(useStyles)(MyClass);
I aim to override styles using CSS as shown below:
CSS File:
.input {
color: #ffffff;
font-size: 18px;
}
InputProps={{
className: "input"
}}
Can you guide me on how to achieve this through CSS? Appreciate your help.