如何使用React-Burger-Menu CSS

r7xajy2e 于 2023-04-01 发布在 React

关注(0)|答案(1)|浏览(115)

我使用react-burger-menu为我的一个网页，我不熟悉css如何在react中工作。css文件是name.module.css
这就是我的菜单组件

import React from 'react';
import { slide as Menu } from 'react-burger-menu';
import sidebar from '../styles/Sidebar.module.css';

export default props => {
  return (
    <div className={sidebar.bm_menu}>
      <Menu>
        <a className={sidebar.bm_item_list} href="/">
          Home
        </a>
        <a className="menu-item" href="/lots">
          Available Parking
        </a>
        <a className="menu-item" href="/stats">
          Parking Statistics
        </a>
        <a className="menu-item" href="/help">
          Help
        </a>
      </Menu>
    </div>
  );
};

至于页面上的菜单正在使用的位置：

import Link from 'next/link'
import Head from "next/head"

import lots from '../styles/lots.module.css';
import Sidebar from './sidebar';
import burger from '../styles/Sidebar.module.css';

function Lots() {
    return (
        <>
            {/* browser tab title and icon */}
            <Head>
                <link rel="icon" href="/latech.ico"/>
                <title>Available Parking</title>
            </Head>
            <div className={burger.bm_burger_button} id='outer-container'>
                <Sidebar styles={ burger } pageWrapId={'page-wrap'} outerContainerId={'outer-container'} />
            </div>

这是网页上的菜单，它只是一个蓝色的盒子：

我看过很多和我有类似问题的人，但我不太熟悉css在react中的工作方式，我不知道该怎么做才能让菜单看起来正常

css

来源：https://stackoverflow.com/questions/75900336/how-to-use-react-burger-menu-css

1条答案

按热度按时间

qvtsj1bj1#

在你的代码中，你使用CSS模块来样式化你的组件。CSS模块允许你编写CSS样式，这些样式的作用域是它们所属的组件，从而防止样式冲突并提高可维护性。
查看您的代码，似乎您正在使用Sidebar.module.css文件中的bm_menu和bm_item_list类来样式化您的Menu组件。然而，react-burger-menu中的Menu组件有自己的一组CSS类，您可以使用它们来样式化菜单。
要设置菜单组件的样式，可以使用样式属性将样式直接添加到组件。例如：

<Menu styles={{ bmMenu: { background: 'red' } }}>
  {/* menu items */}
</Menu>

在这个例子中，我们将菜单的背景颜色改为红色。您可以将任何有效的CSS样式添加到样式属性中以自定义菜单的外观。
若要将样式属性与CSS模块一起使用，可以导入样式并在样式属性中使用它们，如下所示：

import React from 'react';
import { slide as Menu } from 'react-burger-menu';
import sidebar from '../styles/Sidebar.module.css';

export default props => {
  return (
    <Menu styles={{ bmMenu: sidebar.bm_menu }}>
      {/* menu items */}
    </Menu>
  );
};

在这个例子中，我们使用Sidebar.module.css中的bm_menu类来样式化菜单的bmMenu组件。你可以对菜单的其他组件做同样的事情，比如bmItemList或bmBurgerButton。
我希望这有助于你开始对react-burger-menu组件进行样式化！

赞(0）回复(0）举报 2023-04-01

我来回答

如何使用React-Burger-Menu CSS

1条答案

相关问题

热门标签

最新问答