移除 Material UI 图标边距答案

【问题标题】：Remove Material UI icon margin移除 Material UI 图标边距
【发布时间】：2021-01-14 14:47:59
【问题描述】：

有谁知道如何从材料 UI 图标中删除边距！？我想让移动设备删除那个边距，即 margin-left: -4px 和 margin-right: 8px ？反正有没有用类覆盖它？下面的代码不起作用：

personIcon: {
    color: theme.palette.primary.main,
    fontSize: "27px !important",
    [theme.breakpoints.down("xs")]: {
      margin: "0px !important",
    },
  },

此外，我只想为当前组件覆盖它。 ;]

【问题讨论】：

我在默认图标上看不到边距，例如@material-ui/icons/Person。我错过了什么吗？
我刚刚添加了截图
啊，它是Button 组件的一部分，这是非常重要的信息:wink:

标签： reactjs material-ui

【解决方案1】：

您需要将startIcon 自定义点定位为documented here。

在我的示例中，我只使用了SvgIcon，因此我不必费力寻找图标模块。你可以从@material-ui/icons/person导入Person

const { Button, makeStyles, SvgIcon, createMuiTheme } = MaterialUI;

const theme = createMuiTheme();
const useStyles = makeStyles((theme) => ({
  icon: {
    '&& > svg': {
      fontSize: 27,
    },
    [theme.breakpoints.down('xs')]: {
      margin: 0,
    },
  },
}));

const NoMargin = () => {
  const classes = useStyles();

  return (
    <Button
      classes={{ startIcon: classes.icon }}
      startIcon={
        <SvgIcon>
          <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
        </SvgIcon>
      }
    >
      click me
    </Button>
  );
};

ReactDOM.render(<NoMargin />, document.getElementById('root'))

<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<div id="root"></div>

【讨论】：

【解决方案2】：

试试这个：

personIcon: {
    color: theme.palette.primary.main,
    fontSize: "27px !important",
    [theme.breakpoints.down("xs")]: {
      "& > *": {
         margin: 0,
       },
    },
},

【讨论】：