时间戳

首页 > 解决方案 > 如何在所有 Material UI Dialogs 上通用地设置类？

reactjs - 如何在所有 Material UI Dialogs 上通用地设置类？

问题描述

我有很多Material UI 对话框，我想为rg-dialog它们设置类。我该怎么办？

<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>

标签： reactjsmaterial-ui

解决方案

如果要为材质组件全局设置样式，请尝试覆盖默认材质主题。我可能看起来像：

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

const theme = createMuiTheme(themeOptions);

然后在您的ThemeProvider

<ThemeProvider theme={theme}>

如果您不熟悉 material-ui 中的主题，请查看文档

推荐阅读