在Material UI中如何修改MuiBotton-endIcon的左边距？

Question

Material UI 新手，我正在构建一个导航组件，同时阅读文档，我遇到了带有图标和标签的按钮。想要构建一个按钮，我创建了我的组件，但文本和图标之间有很大的间隙。

按钮：

<Button
onClick={selected}
{...{
  size: 'small',
  'aria-label': 'menu',
  'aria-haspopup': 'true',
}}
className={navBtn}
endIcon={<MenuIcon />}
>
Menu
</Button>

当我在浏览器中查看按钮时，呈现的元素是：

<span class="MuiButton-endIcon">
<svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
</svg>
</span>

接下来是CSS：

.MuiButton-endIcon {
    display: inherit;
    margin-left: 8px;
    margin-right: -4px;
}

想要修改左边距的CSS，我试图瞄准

MuiButton-endIcon

：

navBtn: {
  color: '#363537',
  verticalAlign: 'middle',
  '&:hover': {
    backgroundColor: '#FFFFFF',
    boxShadow: 'none',
  },
  '&:focus': {
    boxShadow: 'none',
  },
  MuiButtonEndIcon: {
    marginLeft: '2px',
  },
},

这不起作用。我唯一能做的就是添加一个具有内联样式的

span

：

<Button
onClick={selected}
{...{
  size: 'small',
  'aria-label': 'menu',
  'aria-haspopup': 'true',
}}
className={navBtn}
endIcon={<MenuIcon />}
>
<span style={{ marginRight: '-6px' }}>Menu</span>
</Button>

完整组件：

import React from 'react'

// Material UI
import { Button } from '@material-ui/core'
import MenuIcon from '@material-ui/icons/Menu'

// Styles
import useStyles from '../styles'

const NavIcon = ({ selected }) => {
  const { navBtn } = useStyles()

  return (
    <Button
      onClick={selected}
      {...{
        size: 'small',
        'aria-label': 'menu',
        'aria-haspopup': 'true',
      }}
      className={navBtn}
      endIcon={<MenuIcon />}
    >
      <span style={{ marginRight: '-6px' }}>Menu</span>
    </Button>
  )
}

export default NavIcon

研究：

• 垂直对齐材质图标
• 如何使用 Tabs API 在材质 UI 中水平对齐选项卡标签和选项卡图标
• 居中的图标和文本（React Material-UI）
• 材质 UI - 将图标与版式文本居中对齐

在 Material UI 中，有没有一种方法可以使用

<MenuIcon />

修改从

<Button />

到文本的边距，而无需在文本上实现内联样式 hack？

---

编辑

根据提到间距的答案，我尝试了以下操作：

在

<Button>

：

<Button
m={1}
onClick={selected}
{...{
  size: 'small',
  'aria-label': 'menu',
  'aria-haspopup': 'true',
}}
className={navBtn}
endIcon={<MenuIcon />}
>
Menu
</Button>

在

<MenuIcon>

：

<Button
onClick={selected}
{...{
  size: 'small',
  'aria-label': 'menu',
  'aria-haspopup': 'true',
}}
className={navBtn}
endIcon={<MenuIcon m={1} />}
>
Menu
</Button>

造型：

navBtn: {
  color: '#363537',
  '&:hover': {
    backgroundColor: '#FFFFFF',
    boxShadow: 'none',
  },
  '&:focus': {
    boxShadow: 'none',
  },
},

并且对组件的裕量没有影响。我从文档中了解到，我需要构建一个主题来工作间距。

Answer 1

对于 Material-ui 的每个组件，它们都采用

classes

属性，通过它您可以直接定位内部类。对于

endIcon

，按钮接收一个样式对象以在

endIcon

属性中键入

classes

。

应用程序.js

import React from 'react'

// Material UI
import { Button } from '@material-ui/core'
import MenuIcon from '@material-ui/icons/Menu'

// Styles from style.js
import styles from './styles'


const NavIcon = ({ selected }) => {
  const classes = styles()

  return (
    <Button
      {...{
        size: 'small',
        'aria-label': 'menu',
        'aria-haspopup': 'true',
      }}
      classes={{endIcon:classes.endIcon}}
      endIcon={<MenuIcon />}
      className={classes.navBtn}
    >
      <span style={{ marginRight: '-6px' }}>Menu</span>
    </Button>
  )
}

export default NavIcon

styles.js

import { makeStyles, createStyles } from '@material-ui/core/styles';


const useStyles = makeStyles(() =>
  createStyles({
    endIcon:{
      marginLeft:'4px'
    },
    navBtn: {
      color: '#363537',
      '&:hover': {
        backgroundColor: '#FFFFFF',
        boxShadow: 'none',
      },
      '&:focus': {
        boxShadow: 'none',
      },
    },
  }),
);

export default useStyles

在

endIcon

类中添加所需的边距。

文档

Answer 2

来自Spacing文档

为了使其工作，您必须将所需的元素包装在所谓的“盒子”中

import Box from '@material-ui/core/Box';

您可以为 Button 指定一个名为“m”的 prop，例如：

<Box m="5px"> <Button /> </Box> 

这会为按钮的整体边距添加 5 个像素，但如果您只想将边距应用于左侧，您可以这样做：

<Box ml="5px"> <Button /> </Box> 

Answer 3

您可以通过父按钮的

endIcon

属性更改

sx

的左边距，如下所示 —

<Button
  onClick={selected}
  {...{
    size: "small",
    "aria-label": "menu",
    "aria-haspopup": "true",
  }}
  className={navBtn}
  endIcon={<MenuIcon />}
  sx={{
    '& .MuiButton-endIcon': {
      ml: '0.25em',
    },
  }}
>
  Menu
</Button>;