I am attempting to customize the buttons in my theme for various states such as contained, primary, and hover. However, my current approach is not yielding the desired results.
VIEW CODESANDBOX DEMO: CLICK HERE
theme/overrides/MuiButton.js
import palette from '../palette';
export default {
contained: {
backgroundColor: '#FFFFFF',
'&.primary': {
'&:hover': {
backgroundColor: palette.primary.dark,
},
},
},
};
theme/overrides/index.js
import MuiButton from "./MuiButton";
export default {
MuiButton
};
theme/index.js
import { createMuiTheme } from "@material-ui/core";
import palette from "./palette";
import typography from "./typography";
import overrides from "./overrides";
const theme = createMuiTheme({
palette,
typography,
overrides,
zIndex: {
appBar: 1200,
drawer: 1100
}
});
export default theme;