javascript 如何更改React Material UI中Alert的图标大小

zi8p0yeb 于 2023-06-04 发布在 Java

关注(0)|答案(1)|浏览(126)

最近Material UI开发了'Alert'组件。
一切都很好，excpet他的事实，我不认为有办法改变图标大小。
这是我的代码：

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

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

JavaScript

来源：https://stackoverflow.com/questions/59913673/how-to-change-icon-size-on-alert-in-material-ui-for-react

1条答案

按热度按时间

lfapxunr1#

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

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

赞(0）回复(0）举报 2023-06-04

我来回答

javascript 如何更改React Material UI中Alert的图标大小

1条答案

相关问题

热门标签

最新问答