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

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