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

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

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

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

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

введите здесь описание изображения

Спасибо!


reactjs hamburger-menu
person Djaenike    schedule 01.05.2019    source источник
comment
Пожалуйста, поделитесь рабочим примером на stackblitz.com. Спасибо   -  person Hassan Siddiqui    schedule 01.05.2019
comment
stackblitz.com/edit/react-z36ayd здесь фон почему-то прозрачен, но в моем приложении это как красновато-оранжевый.   -  person Djaenike    schedule 01.05.2019
comment
В приведенной выше ссылке Цвет фона непрозрачен. Как вы упомянули, он красновато-оранжевый.   -  person Hassan Siddiqui    schedule 01.05.2019
comment
Извините, не тот. Это когда вы нажимаете кнопку, и меню выходит. В моей программе фон розовый, и я не могу понять, как его изменить.   -  person Djaenike    schedule 01.05.2019
comment
Пожалуйста, добавьте скриншоты в описание вашего вопроса.   -  person Hassan Siddiqui    schedule 01.05.2019
comment
Просто добавил картинку. надеюсь, это поможет   -  person Djaenike    schedule 01.05.2019

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

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

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

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

Пример stackblitz

person Abdelkarim EL AMEL    schedule 01.05.2019
comment
Спасибо! Это удалило этот синий контур, однако у меня все еще есть этот розовый фон. - person Djaenike; 01.05.2019
comment
вы можете попробовать добавить стили для этого класса bg-menu, я добавлю содержимое в ответ - person Abdelkarim EL AMEL; 01.05.2019
comment
К сожалению, это ничего не дало. Все еще получаю этот розовый фон в выпадающем меню. Я добавил скриншот в свой вопрос, чтобы показать, в чем проблема. - person Djaenike; 01.05.2019
comment
у вас есть другие файлы css в вашем приложении? который может применить этот цвет? - person Abdelkarim EL AMEL; 01.05.2019
comment
Хм хороший вопрос. Честно говоря, я не очень хорошо знаком с пакетом react-burger-menu, но там должен быть какой-то css по умолчанию. Я покопаюсь там и посмотрю, что я могу найти. Спасибо - person Djaenike; 01.05.2019
comment
Вы можете попробовать проверить элемент dom в своем браузере и посмотреть, откуда берется цвет? - person Abdelkarim EL AMEL; 01.05.2019
comment
Что ж, это был трюк! Увидел, что класс списка - .bm-item-list, который я вызвал в css, чтобы изменить цвет. Спасибо за чаевые - person Djaenike; 01.05.2019