无法将自定义 class 应用于 hamburger-react 组件

Question

我正在使用 Gatsby 和 React-Bootstrap 构建一个网站。我在导航栏中添加了一个汉堡包反应 (https://hamburger-react.netlify.app) 组件，以使用动画汉堡包图标代替 bootstrap.

中的默认图标

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

这是我的代码：

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;

我们想将 class 应用到具有 className={burger} 的 Hamburger 组件。 css 组件中的 class 名称应为 .burger。但唯一应用于最终 HTML 元素的 class 是 hamburger-react，如您在 this image.

中所见

Answer 1

如果您创建一个父对象 div 并为其指定类名“burger”会怎样？

无法将自定义 class 应用于 hamburger-react 组件

Cannot apply custom class to hamburger-react Component

reactjs

react-bootstrap

hamburger-menu