MUI default stylings are overriding mine - css

Question

I use makeStyles to style a custom card but the MUI default styles are overriding them, when I use !important my styles are applying otherwise they are getting overridden.
const useStyles = makeStyles({
'dashboard-card': {
boxSizing: 'border-box',
borderRadius: '20px',
boxShadow:
'0px 4px 4px rgba(50, 50, 71, 0.08), 0px 4px 8px rgba(50, 50, 71, 0.06)',
},
});
type DashboardCardProps = {
children: JSX.Element | JSX.Element[];
className?: string;
};
const DashboardCard = ({ children, className }: DashboardCardProps) => {
const classes = useStyles();
return <Card className={`${className} ${classes['dashboard-card']}`}>{children}</Card>;
};
export default DashboardCard;
Is there any way how can I get around this, is it possible to remove the default stylings from the theme?
const theme = createTheme({
palette: {
primary: {
light: '#21B8F9',
main: '#103B66',
dark: '#000032',
},
},
components: {
MuiCard: {
styleOverrides : {
root: {}
}
},
MuiPaper: {
styleOverrides: {
root: {}
}
}
},
typography: {
fontFamily: ['Source Sans Pro', 'Noto Sans HK'].join(','),
},
});