I'm facing an issue where I cannot override the style using `className` on a `Button`. Interestingly, the same style works correctly on a `TextField`. However, when I use the `style` prop, it allows me to successfully override the `Button` style. What could I be missing?
Find the full details of the issue here: https://codesandbox.io/s/bold-dewdney-r6y8u
Same Code:
import React from "react";
import { Button, TextField } from "material-ui";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
buttonStyle: {
backgroundColor: "#ADD8E6"
}
}));
const App = () => {
const classes = useStyles();
return (
<div>
<Button className={classes.buttonStyle}>Failed Submit</Button>
<Button style={{ backgroundColor: "#CACACA" }}>Working Submit</Button>
<br />
<br />
<TextField className={classes.buttonStyle} label="Name" />
</div>
);
};
export default App;