Initially, my button was styled like this:
style={{
background: '#6c74cc',
borderRadius: 3,
border: 0,
color: 'white',
height: 48,
padding: '0 30px',
}}>
It worked perfectly. The text color was white and the background matched the button color. However, I have now switched to using the following method:
className={classes.button}>
export const useStyles = makeStyles((theme: Theme) =>
createStyles({
button: {
background: '#6c74cc',
borderRadius: 3,
border: 0,
color: 'white',
height: 48,
padding: '0 30px',
//fontStyle: 'red',
},
}),
);
Now, while the background color displays correctly, the text color is not white when the button is disabled. It appears fine when the button is enabled but not when it's disabled. How can I resolve this issue?