Material ui 在材质界面中，如何修改MuiBotton endIcon'；左边是多少？

新的材料界面，我正在建立一个导航组件，而通过阅读文件，我跑过。想要构建一个按钮，我创建了我的组件，但是文本和图标之间有很大的差距

按钮：

菜单

当浏览器中的“我查看”按钮时，渲染的元素为：

然后是CSS：

.MuiButton endIcon{
显示：继承；
左边距：8px；
右边距：-4px；
}

想要修改左边空白处的CSS，我尝试将目标设置为

MuiButton endIcon

：

navBtn:{
颜色：“#363537”，
垂直排列：'中间'，
“&：悬停”：{
背景颜色：“#FFFFFF”，
boxShadow：“无”，
},
“&：焦点”：{
boxShadow：“无”，
},
Muibuttonedicon：{
marginLeft:'2px'，
},
},

这是行不通的。我唯一能做的就是添加一个带有内联样式的

span

：

菜单

全部组成部分：

从“React”导入React
//材料界面
从“@material ui/core”导入{Button}
从“@material ui/icons/Menu”导入菜单图标
//风格
从“../styles”导入useStyles
常量NavIcon=（{selected}）=>{
const{navBtn}=useStyles（）
返回(
菜单
)
}
导出默认NavIcon

研究：

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

中的边距修改为带有

的文本，而无需对文本实施内联样式攻击

---

编辑 根据上述内容，我尝试了以下方法：

在

上：

菜单

在

上：

菜单

样式：

navBtn:{
颜色：“#363537”，
“&：悬停”：{
背景颜色：“#FFFFFF”，
boxShadow：“无”，
},
“&：焦点”：{
boxShadow：“无”，
},
},

并且对组件的边缘没有影响。从文档中我对工作间隔的理解，我需要构建一个主题。

从文档中

为了让它工作，你必须将你想要的元素包装在一个所谓的“盒子”中

您可以为按钮指定一个名为“m”的道具，例如：

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

这将向按钮的总边距添加5个像素，但如果只想在左侧应用边距，可以执行以下操作：

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

---

对于材质ui的每个组件，它们都采用

类

道具，通过该道具，您可以直接针对内部类。对于

endIcon

，按钮接收样式对象，以

endIcon

键入

classes

prop

App.js 在

endIcon

类中添加所需的边距

---

尝试了此操作，但应用于

或

时，它不起作用。编辑成问题。我编辑了我的回答！您必须将其包装在一个名为“Box”的组件上才能工作。这不起作用，因为当文本

菜单

是

的子菜单时，它将整个按钮作为目标。当您应用

和边距时，当问题表明我用文本定位组件边距时，这会移动整个按钮组件。这将有助于实现有趣的方法，但如何将

makeStyles

中的

navBtn

CSS与

createStyles

合并在一起，以便将其移动到类似styles.js的文档中？我看到

navBtn

从

className

更改为

classes

。在styles.js对象中为end图标创建另一个类，然后将该类传递给endIconlet me编辑此答案我看到了，但我想知道的是，如果我从一个文件中有两个样式对象，那么最好的方法是将每个样式对象放在上面并使用两个不同对象的两种不同样式。现在检查答案。你是在说这样的事吗？？

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

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

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