删除Material UI图标边距 [英] Remove Material UI icon margin

问题描述

有人知道如何从实质性UI图标中删除边距！?我想让移动设备删除该边距，即:margin-left:-4px和margin-right:8px?无论如何，有没有用类覆盖它?下面的代码不起作用:

Does anyone know how to remove the margin from material UI icons!? I want for mobile to remove that margin, which is margin-left: -4px and margin-right: 8px ? Is there anyway to override it with classes? The code below is not working:

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

此外，我只想对当前组件覆盖它.;]

In addition I want to override it only for the current component. ;]

推荐答案

您需要定位 startIcon 定制点，如

You need to target the startIcon customization point, as documented here.

在我的示例中，我只使用了 SvgIcon ，所以我不必在寻找图标模块时费力.您可以从 @ material-ui/icons/person

In my example I just used SvgIcon so I don't have to fiddle around with looking for the icons module. You can import Person from @material-ui/icons/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>

这篇关于删除Material UI图标边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！