In Material UI how can I modify MuiBotton-endIcon's margin left?

user_1952287 0
Viewed 2454

New to Material UI I'm building a navigation component while reading through the docs and I ran across Buttons with icons and label. Wanting to build a button I created my component but there is a large gap between the text and icon.

Button:

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

When I review button in the browser the rendered element is:

<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>

followed with the CSS of:

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

Wanting to modify the CSS of the margin left I attempted to target MuiButton-endIcon:

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

which did not work. The only hack I can get to work is to add a span with inline styling:

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

the full component:

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

Research:

In Material UI is there a way to modify the margin from the <MenuIcon /> to the text with a <Button /> without implementing an inline style hack on the text?

Edit

Per the answer that mentioned spacing I tried the following:

on <Button>:

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

on <MenuIcon>:

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

styling:

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

and there is no effect on the margin to the component. My understanding from the docs for spacing to work I would need to build a theme.

material-ui
2 Answers

for every component of the material-ui, they take a classes prop, by which you can target the inside classes directly. For endIcon, button receives a style object to endIcon key in classes prop.

App.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

Add the required margin in endIcon class.

Edit Invisible Backdrop

Documentation

user_112222820

From the Spacing docs

In order for it to work you have to wrap the element you want in a so called "Box"

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

You can specify a prop called "m" to the Button, for example:

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

This adds 5 pixels to the overall margin of the button, but if you want to apply only margin to the left you can do:

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