MUI: customize button component with tailwind classes

Viewed 535

I'm trying to customise the look of MUI's <Button /> component. As i want to do it by using tailwind classes i tried to use defaultProps instead of styleOverrides.

const lightTheme = createTheme({
  components: {
    MuiButton: { defaultProps: { classes: { root: 'p-8' } } },
  },
});

It is working fine except that i'm not able to add tailwind classes when i use the <Button /> component as this will overwrite the changes i made above.

<Button variant="contained" classes={{ root: 'p-12' }}>
  Ok
</Button>

Is there a way to extend the definition of the classes prop rather than overwriting it?

0 Answers
Related