How come the customTheme I've created is not being applied to my buttons in MUI 5? Can someone please spot where I'm going wrong and suggest a solution?
import React from 'react';
import NavBar from './components/NavBar';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { Button } from '@mui/material';
const customTheme = createTheme({
overrides: {
MuiButton: {
outlined: {
backgroundImage: 'linear-gradient(to top, #d299c2 0%, #fef9d7 100%)',
color: 'green'
},
text: {
color: "red"
}
}
}
})
function App() {
return (
<div id='appDiv2'>
<ThemeProvider theme={customTheme}>
<NavBar />
<Button variant='outlined'> Test Button </Button>
</ThemeProvider>
<DirectionSnackbar />
</div>
);
}
export default App;