[英]How to change icon size on Alert in Material UI for React
最近 Material UI 开发了“警报”组件。
一切都很好,除了我看不到更改图标大小的方法的事实。
这是我的代码:
<Snackbar open={true}>
<Alert
className={classes.cookieAlert}
severity="info"
action={<Button color="inherit" size="small">OK</Button>}
>
We use cookies to ensure you the best experience on our website.
</Alert>
</Snackbar>
图标由“严重性”定义,我该如何更改它的大小? 我不想覆盖图标,只需将其大小更改为更大。
图标的大小由字体大小控制。 下面是一个基于您的代码的示例,它显示了一种自定义方式。
import React from "react";
import Snackbar from "@material-ui/core/Snackbar";
import Button from "@material-ui/core/Button";
import Alert from "@material-ui/lab/Alert";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles({
cookieAlert: {
"& .MuiAlert-icon": {
fontSize: 40
}
}
});
export default function App() {
const classes = useStyles();
return (
<Snackbar open={true}>
<Alert
className={classes.cookieAlert}
severity="info"
action={
<Button color="inherit" size="small">
OK
</Button>
}
>
We use cookies to ensure you the best experience on our website.
</Alert>
</Snackbar>
);
}
参考:
MuiAlert-icon
): https : MuiAlert-icon
Alert
源代码显示了如何设置图标的默认字体大小: https : //github.com/mui-org/material-ui/blob/v4.9.0/packages/material-ui-lab/src/Alert/警报.js#L128
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.