0

I am using Nextjs with Material UI. I have 2 dialog boxes with different styles but I don't know how to override theme for both by using createTheme. First dialog box have width 200px and the second one have 500px. If I overrride dialog width to 500px it reflects to both dialog boxes and I don't want this. What's the best way to createThemes if we have 2 same components with different properties? Thanks!...

I have 2 dialog boxes with different styles in MUI but I don't know how to override theme for both by using createTheme.

Olivier Tassinari
  • 8,238
  • 4
  • 23
  • 23
coder
  • 1
  • 1
  • Take the common styles and add them to the theme and the uncommon styles (e.g. `width` and put the in the component implementation (e.g `sx` prop of the actual dialogs) *or*, if they're different enough, define new dialog variants. – Steve Jul 03 '23 at 02:01

1 Answers1

0

declare width in theme:

export const theme = createTheme({
  components: {
    MuiDialog: {
      styleOverrides: {
        paperWidthXs: {
          width: 200,
        },
        paperWidthMd: {
          width: 500,
        },
      },
    },
  },
})

use maxWidth:

      <Dialog maxWidth="md">
        <DialogContent>
          <DialogContentText>
            md: Let Google help apps determine location. This means sending
            anonymous location data to Google, even when no apps are running.
          </DialogContentText>
        </DialogContent>
      </Dialog>

      <Dialog maxWidth="xs">
        <DialogContent>
          <DialogContentText>
            sx: Let Google help apps determine location. This means sending
            anonymous location data to Google, even when no apps are running.
          </DialogContentText>
        </DialogContent>
      </Dialog>
orange
  • 11
  • 3
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 10 '23 at 01:13