Изменение цвета фона меню Гамбургер в реакции - PullRequest
Новая
       29

Изменение цвета фона меню Гамбургер в реакции

0 голосов
/ 01 мая 2019

Я использую реагирующее меню и не могу изменить цвет фона пункта меню по умолчанию красный / розовый.Это код реакции, который я использую: 

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;

А вот код, который я использую 

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

Я также вижу синюю рамку вокруг первого элемента и любой другой элементЯ нажимаю.Есть ли способ избавиться от этого?

Вот картинка:

enter image description here

Спасибо!

1 Ответ

1 голос
/ 01 мая 2019

Если вы хотите удалить цвет фона для элемента меню при наведении, вы можете сделать его прозрачным, как это: 

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

А для удаления синей рамки на ссылках вы можете использовать outline: none; в вашемКласс элемента меню, подобный следующему: 

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

Для цвета фона боковой панели вы можете изменить его следующим образом: 

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

Образец stackblitz

...