如何将菜单更改为不包含填充或更改背景颜色

Question

我有一个实质性的ui菜单，并且有一个li：first-child，菜单创建为具有20px的填充。我希望删除该填充或使其背景颜色与菜单的其余部分相同。

下面的图像在“菜单1”上方具有白色填充，不需要填充或设置背景颜色。

单击图像以查看菜单如何填充。

https://imgur.com/6u9FUhB.png

import PropTypes from 'prop-types';
import { connect } from "react-redux";

import { withStyles } from '@material-ui/core/styles';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import Divider from '@material-ui/core/Divider';
import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu';
import MenuIcon from '@material-ui/icons/Menu';

// setup the style

const mainContentStyles = theme => ({
    grow: {
        flexGrow: 1,
    },
    menuButton: {
        marginRight: theme.spacing(0),
    },
    title: {
        display: 'none',
        [theme.breakpoints.up('sm')]: {
            display: 'block',
        },
    },
    sectionDesktop: {
        display: 'none',
        [theme.breakpoints.up('md')]: {
            display: 'flex',
        },
    },
    sectionMobile: {
        display: 'flex',
        [theme.breakpoints.up('md')]: {
            display: 'none',
        },
    },
    toolbar: {
        backgroundColor: "#000000"
    },
    container: {
        padding: "0"
    },
    menuDivider: {
        backgroundColor: '#494949'
    },
    menuItem: {
        backgroundColor: '#000000',
        color: '#ffffff',
        "&:hover": {
            backgroundColor: '#808080',
            color: '#ffffff'
        },
        "&:selected": {
            backgroundColor: '#000000',
            color: '#ff0000'
        }
    },
    menuItemRoot: {
        "&$menuItemSelected, &$menuItemSelected:focus, &$menuItemSelected:hover": {
            backgroundColor: "red"
        }
    }
});

export class MainContent extends Component {
    constructor(props) {
        super(props);

        // our menu to display

        this.menuContentItems = [
            { value: 1, text: "Menu 1" },
            { value: 2, text: "Menu 2" },
            { value: 3, text: "Menu 3" },
            { value: 0, text: null },
            { value: 4, text: "Menu 4" },
            { value: 5, text: "Menu 5"},
            { value: 6, text: "Menu 6" }
        ];

        this.handleMenuOpen = this.handleMenuOpen.bind(this);
        this.handleMenuClose = this.handleMenuClose.bind(this);
        this.handleMenuClicked = this.handleMenuClicked.bind(this);
    }

    // open the menu
    handleMenuOpen(event) {
        this.setState({anchorEl : event.currentTarget});
    }

    // close the menu
    handleMenuClose(event, value) {
        this.setState({anchorEl : null});
    }

    // menu item was clicked
    handleMenuClicked(event) {
        this.handleMenuClose();
    }

    // render the page
    render() {
        let { classes, size } = this.props;

        // build the menu items context
        let menuItems = [];
        let index = 0;
        let previousItem = null;
        for (let item in this.menuContentItems) {
            let insert = true;

            if (insert && previousItem != null && this.menuContentItems[item].value == previousItem) {
                insert = false;
            }

            if (insert) {
                if (this.menuContentItems[item].value == 0) {
                    menuItems.push(<Divider key={index} className={classes.menuDivider} />);
                }
                else {
                    menuItems.push(<MenuItem    key={index} 
                                                value={this.menuContentItems[item].value} 
                                                className={classes.menuItem}
                                                onClick={this.handleMenuClicked}>
                                                    {this.menuContentItems[item].text}
                                                </MenuItem>);
                }
                previousItem = this.menuContentItems[item].value;
                index++;
            }
        }

        // build the menu context
        const menuId = 'primary-menu-selection';
        const renderMenu = (
            <Menu   anchorEl={anchorEl}
                    className={classes.container}
                    MenuListProps={{ disablePadding: true }}
                    id={menuId}
                    keepMounted
                    open={Boolean(anchorEl)}
                    onClose={this.handleMenuClose}>
                {menuItems}
            </Menu>
        );

        // return the toolbar to display our menu items
        return (
            <div>
                <div className="MainContent">
                    <Toolbar className={toolbarClass}>
                        <div className={classes.sectionDesktop}>
                            <IconButton edge="end" 
                                        aria-controls={menuId}
                                        aria-haspopup="true"
                                        onClick={this.handleMenuOpen}
                                        className={classes.menuButton} color="inherit" aria-label="open drawer">
                                <MenuIcon />
                            </IconButton>
                        </div>
                    </Toolbar>
                </div>
                <div>
                    {renderMenu}
                </div>
            </div>
        );
    }
}

export default (withStyles(mainContentStyles)(MainContent));