在反应中更改汉堡菜单的背景颜色

Question

我正在使用 react-burger-menu，无法将菜单项的背景颜色从默认的红色/粉色更改。这是我正在使用的反应代码：

import React, { Component } from 'react';
import { slide as Menu } from 'react-burger-menu'
import './burger.css';
import icon from './menu.png';
import { Link } from 'react-router-dom';

class BurgerMenu extends Component {

    showSettings (event) {
        event.preventDefault();
      }

      render () {
        return (
          <Menu customBurgerIcon={ <img src={icon} /> }>
            <Link className="menu-item">Contact</Link>
            <Link className="menu-item">About</Link>
            <Link className="menu-item">Trending</Link>
            <Link className="menu-item">Settings</Link>
          </Menu>
        );
      }

}

export default BurgerMenu;

这是我正在使用的 css

.bm-burger-button {
    position: fixed;
    width: 30px;
    height: 30px;
    top: 78px;
    left: 10px;
    background-color: white;
  }

 .menu-item {
     padding: 5px;
     color: white;
 }

 .menu-item:hover {
     background-color: #808090;
 }

我还看到第一个项目周围有一个蓝色轮廓框，以及我单击的任何项目。有什么办法可以摆脱吗？

图片如下：

谢谢！

Answer 1

如果您想在悬停时删除菜单项的背景颜色，您可以像这样使其透明：

.menu-item:hover {
     background-color: transparent;
 }

要删除链接上的蓝色边框，您可以在菜单项类中使用outline: none;，如下所示：

 .menu-item {
     padding: 5px;
     color: white;
     outline: none;
 }

对于侧边栏背景颜色，您可以这样更改：

.bm-menu {
  background-color: green;
}

示例stackblitz