无法将自定义类应用于汉堡包反应组件答案

【问题标题】：Cannot apply custom class to hamburger-react Component无法将自定义类应用于汉堡包反应组件
【发布时间】：2021-07-09 10:00:43
【问题描述】：

我正在使用 Gatsby 和 React-Bootstrap 构建一个网站。我在导航栏中添加了一个 hamburger-react (https://hamburger-react.netlify.app) 组件，以使用动画汉堡图标而不是引导程序中的默认图标。

问题是它仍然显示在大屏幕上，而我希望它只显示在小屏幕上。我尝试在 css 中使用 mediaquery 断点（使用 css 模块），但看起来我无法在 Hamburger 组件上应用自定义类。

这是我的代码：

import * as React from "react";
import { useState } from "react";

import {
    burger
} from "./layout.module.css";
import Hamburger from 'hamburger-react';


const Menu = () => {
    const [isOpen, setOpen] = useState(false)

    return (
        <Hamburger toggled={isOpen} toggle={setOpen} className={burger} />
    )
};

export default Menu;

我们想用className={burger} 将该类应用于汉堡组件。 css 组件中的类名应该是.burger。但是应用于最终 HTML 元素的唯一类是 hamburger-react，正如您在 this image 上看到的那样。

【问题讨论】：

标签： reactjs react-bootstrap hamburger-menu

【解决方案1】：

如果你创建一个父 div 并将它的 className 命名为“burger”呢？

【讨论】：