CODEWITHSUNDEEP
reactjsmaterial-ui
Mohamad Shiralizadeh
Mohamad Shiralizadeh

Reputation: 8765

How to set classes on all Material UI Dialogs universally?

I have many Material UI dialog I want to set rg-dialog class on all of them. What should I do?

<Dialog
    classes={{ root: 'rg-dialog' }}
    open={workflowHistoryDialogVisible}
>
    <DialogTitle>History</DialogTitle>
    <DialogContent>
        [WorkflowHistory]
    </DialogContent>
    <DialogActions>
        <MatButton className="btn-warning text-white"
            onClick={() => setWorkflowHistoryDialogVisibleAction(false)}>Close</MatButton>
    </DialogActions>
</Dialog>

Upvotes: 1

Views: 897

Answers (1)

yuval.bl
yuval.bl

Reputation: 5074

If you want to set styles globally for material components, try overriding the default material theme. I might look like:

const themeOptions = {
  overrides: {
    MuiDialog: {
      // your override styles here. for example, the following overrides dialog's "root" class
      root: {
        padding: 5
      }
    }
  }
};

const theme = createMuiTheme(themeOptions);

Then use the modified theme in your ThemeProvider

<ThemeProvider theme={theme}>

If you are new to themes in material-ui, check out the docs

Upvotes: 3

Related Questions