如何将DialogTitle设置为字体变体h5

Question

我目前有很多对话框，希望将DialogTitle更改为Typographyh5标题。目前这项工作：

<DialogTitle>
<Typography variant="h5">Create Exercise</Typography>
</DialogTitle>

但我希望这能应用于所有对话框，而不必添加使用排版组件。我也尝试过以下createTheme，但这并没有改变fontSize。

const theme = createTheme({
components: {
MuiDialogTitle: {
styleOverrides: {
root: {
// Set this to h5
fontSize: "1.5rem",
},
},
},
},
});

Answer 1

修改下面提到的DialogTitle组件

import MuiDialogTitle from "@material-ui/core/DialogTitle";
import Typography from "@material-ui/core/Typography";
import { withStyles } from "@material-ui/core/styles";
const styles = (theme) => ({
root: {
margin: 0,
padding: theme.spacing(2),
},
});
const DialogTitle = withStyles(styles)((props) => {
const { children, classes, ...other } = props;
return (
<MuiDialogTitle disableTypography className={classes.root} {...other}>
<Typography variant="h5">{children}</Typography>
</MuiDialogTitle>
);
});
export default DialogTitle;

使用这个组件作为DialogTitle，即使你可以修改样式，也可以在DialogTitle中添加额外的组件，比如关闭图标或一些次要标题。