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

Question

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

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

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

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

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

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

样本stackblitz

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

Changing background color of Hamburger menu in react

reactjs

hamburger-menu