Why Material UI Theme overrides doesn't work? - reactjs

Question

I use the material UI "createTheme" function. When ı write overrides for button and switch it's doesn't work. Material UI's None of the overrides features work but the theme palette, font-size working. Why it doesn't work? Thanks in advance.
// My overrides
overrides: {
MuiButton: {
primary: {
background: "pink",
},
sizeSmall: {
height: 22.5,
fontSize: 10,
padding: "0 15px",
},
sizeLarge: {
height: 37,
padding: "0 30px",
fontSize: 16,
},
text: {
background: "#1AD971",
borderRadius: 4,
border: 0,
color: "white",
padding: "0 22px",
height: 30,
textAlign: "center",
lineHeight: 1,
fontSize: 14,
fontWeight: 400,
"&:hover": {
backgroundColor: "#0BBF5D",
},
},
contained: {
backgroundColor: "#FFFFFF",
color: "#000000",
borderRadius: 30,
},
outlined: {
color: "#1AD971",
border: "1px solid #1AD971",
borderRadius: "15px",
},
},
MuiSwitch: {
switchBase: {
color: "#73889D",
},
colorSecondary: {
"&$checked": {
color: "#FFFFFF",
},
},
track: {
opacity: 1,
backgroundColor: "#213348",
"$checked$checked + &": {
opacity: 1,
backgroundColor: "#FFC231",
},
},
},
},

Answer 1

If you are working on MUI version 5, as mentioned in the comment above, you should be using the below code
const theme = createTheme({
components: {
MuiButton: {
styleOverrides: {
root: {
border: '1px solid #ff4742',
background: 'white',
borderRadius: 12,
border: 0,
color: 'black',
height: 48,
padding: '0 30px',
fontWeight: 'bold',
boxShadow: '1px 2px 4px rgb(0 0 0 / 10%)',
}
}
},
}});