更改 startIcon / endIcon Material-UI 的大小

Posted 2023-02-22

【中文标题】更改 startIcon / endIcon Material-UI 的大小

【英文标题】：Change size of startIcon / endIcon Material-UI

【发布时间】：2020-10-21 23:02:36

【问题描述】：

我正在 Material-UI 中创建一个主题，并且必须使用我们自己的一组图标 (SVG)。但是，当插入带有startIcon / endIcon 的按钮时，图标会变得太小。有没有办法增加图标而不是字体的大小。最好来自主题设置。

以下是按钮示例：https://codesandbox.io/s/inspiring-spence-gsov0?file=/src/App.js

import React from "react";
import "./styles.css";
import Button from "@material-ui/core/Button";
import  SvgIcon  from "@material-ui/core";

function CloudIcon(props) 
  return (
    <SvgIcon ...props>
      <svg viewBox="0 0 94 94" ...props>
        <title>"B Circle"</title>
        <circle cx=47 cy=47 r=47 fill="#1700ff" />
        <title>"\uF0C2"</title>
        <path
          d="M61.9 61.6h-29c-6.3 0-11.3-5.1-11.3-11.3 0-5 3.2-9.3 7.9-10.8.2-7.2 6.2-13.1 13.5-13.1 4.4 0 8.4 2.1 10.9 5.6 1.2-.6 2.5-.9 3.9-.9 5.1 0 9.3 4.2 9.3 9.3 0 .5 0 1-.1 1.5 3.3 1.9 5.4 5.4 5.4 9.2 0 5.8-4.7 10.5-10.5 10.5zM43 28.4c-6.3 0-11.5 5.2-11.5 11.5V41l-.8.2c-4.2 1-7.2 4.7-7.2 9.1 0 5.2 4.2 9.3 9.3 9.3h28.9c4.7 0 8.5-3.8 8.5-8.5 0-3.3-1.9-6.3-4.9-7.7l-.6-.4.2-.8c.1-.6.2-1.2.2-1.8 0-4-3.3-7.3-7.3-7.3-1.3 0-2.6.3-3.7 1l-.8.5-.5-.8c-2.2-3.4-5.8-5.4-9.8-5.4z"
          fill="#fff"
        />
      </svg>
    </SvgIcon>
  );


export default function App() 
  return (
    <div className="App">
      <Button startIcon=<CloudIcon /> variant="outlined">
        Test
      </Button>
    </div>
  );

【参考方案1】：

可以在此处找到图标大小的默认样式（如下所示）：https://github.com/mui-org/material-ui/blob/v4.11.0/packages/material-ui/src/Button/Button.js#L249。使用这三个中的哪一个取决于Button 的size 属性。 medium 是默认值。

  /* Styles applied to the icon element if supplied and `size="small"`. */
  iconSizeSmall: 
    '& > *:first-child': 
      fontSize: 18,
    ,
  ,
  /* Styles applied to the icon element if supplied and `size="medium"`. */
  iconSizeMedium: 
    '& > *:first-child': 
      fontSize: 20,
    ,
  ,
  /* Styles applied to the icon element if supplied and `size="large"`. */
  iconSizeLarge: 
    '& > *:first-child': 
      fontSize: 22,
    ,
  ,

以下是如何在主题中覆盖它的示例。

const theme = createMuiTheme(
  overrides: 
    MuiButton: 
      iconSizeMedium: 
        "& > *:first-child": 
          fontSize: 22
        
      
    
  
);

【参考方案2】：

我也有同样的问题，如果您不想更改您的 Theme，这里有一个可能的解决方案。您可以直接在组件级别覆盖嵌套的iconSizeMedium CSS 样式。这是一个示例，其中Button 被Typography 包裹，让它通过inherits 控制font-size：

import Button from '@material-ui/core/Button';
import PhoneEnabledIcon from '@material-ui/icons/PhoneEnabled';
import  makeStyles  from '@material-ui/styles';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles((theme) => (
    buttonRoot: 
        fontSize: 'inherit', /* inherit from Typography */
    ,
    myIconSizeMedium: 
        "& > *:first-child": 
            fontSize: 'inherit'
        
    
));

export default function MyButton( children ) 

    const classes = useStyles();

    return (
        <Typography color='textSecondary' variant="h6" >
            <Button
                startIcon=<PhoneEnabledIcon />
                className=classes.buttonRoot
                classes= iconSizeMedium: classes.myIconSizeMedium 
            >
                children
            </Button>
        </Typography>
    )

【参考方案3】：

你可以使用比例：

import React from "react";
import "./styles.css";
import Button from "@material-ui/core/Button";
import  SvgIcon  from "@material-ui/core";

function CloudIcon(props) 
  return (
    <SvgIcon ...props style=
      transform: 'scale(1.5)' // Tune it
    >
      <svg viewBox="0 0 94 94" ...props>
        <title>"B Circle"</title>
        <circle cx=47 cy=47 r=47 fill="#1700ff" />
        <title>"\uF0C2"</title>
        <path
          d="M61.9 61.6h-29c-6.3 0-11.3-5.1-11.3-11.3 0-5 3.2-9.3 7.9-10.8.2-7.2 6.2-13.1 13.5-13.1 4.4 0 8.4 2.1 10.9 5.6 1.2-.6 2.5-.9 3.9-.9 5.1 0 9.3 4.2 9.3 9.3 0 .5 0 1-.1 1.5 3.3 1.9 5.4 5.4 5.4 9.2 0 5.8-4.7 10.5-10.5 10.5zM43 28.4c-6.3 0-11.5 5.2-11.5 11.5V41l-.8.2c-4.2 1-7.2 4.7-7.2 9.1 0 5.2 4.2 9.3 9.3 9.3h28.9c4.7 0 8.5-3.8 8.5-8.5 0-3.3-1.9-6.3-4.9-7.7l-.6-.4.2-.8c.1-.6.2-1.2.2-1.8 0-4-3.3-7.3-7.3-7.3-1.3 0-2.6.3-3.7 1l-.8.5-.5-.8c-2.2-3.4-5.8-5.4-9.8-5.4z"
          fill="#fff"
        />
      </svg>
    </SvgIcon>
  );


export default function App() 
  return (
    <div className="App">
      <Button startIcon=<CloudIcon /> variant="outlined">
        Test
      </Button>
    </div>
  );