CODEWITHSUNDEEP
material-uidialogmaterial-componentsmaterial-dialog
coder
coder

Reputation: 1

How to override Material UI theme if we have 2 dialog boxes with different properties?

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.

Upvotes: 0

Views: 620

Answers (1)

orange
orange

Reputation: 21

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>

Upvotes: 0

Related Questions