如何在 React 的 Material UI 中更改警报上的图标大小

Posted 2023-02-22

【中文标题】如何在 React 的 Material UI 中更改警报上的图标大小

【英文标题】：How to change icon size on Alert in Material UI for React

【发布时间】：2020-05-11 19:09:00

【问题描述】：

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

图标是由“严重性”定义的，我该如何更改它的大小？我不想覆盖图标，只需将其大小更改为更大。

【问题讨论】：

你为什么要删除你的帖子 Matt Oestreich？您开始一团糟，然后将其删除。

【参考方案1】：

图标的大小由字体大小控制。下面是一个基于您的代码的示例，它显示了一种自定义方式。

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

参考资料：

可用于覆盖的 CSS 类（包括 MuiAlert-icon）：https://material-ui.com/api/alert/#css Alert 的源代码显示了如何设置图标的默认字体大小：https://github.com/mui-org/material-ui/blob/v4.9.0/packages/material-ui-lab/src/Alert/Alert.js#L128