如何将样式应用到带有样式组件的 react-burger-menu 按钮? [英] How to apply styles to react-burger-menu button with styled-components?

问题描述

我想在 React 应用程序中使用 styled-components 来创建一个菜单组件，该组件包含同一文件中的样式，从而使其非常模块化.我使用 react-burger-menu 作为菜单.如果我将 BurgerMenu 包装在一个样式化的 div 中，一切正常(从 react-burger-menu README.md 复制的样式):

I would like to use styled-components in a React app to create a menu component that contains the styles in the same file thus making it very modular. I'm using react-burger-menu for the menu. Everything works correctly if I wrap BurgerMenu in a styled div like so (styles copied from react-burger-menu README.md):

import React from 'react';
import { slide as BurgerMenu } from 'react-burger-menu';
import styled from 'styled-components';


const StyledBurgerMenu = styled.div`
  /* Position and sizing of burger button */
  .bm-burger-button {
    position: fixed;
    width: 36px;
    height: 30px;
    left: 36px;
    top: 36px;
  }

  /* Color/shape of burger icon bars */
  .bm-burger-bars {
    background: #373a47;
  }

  /* Position and sizing of clickable cross button */
  .bm-cross-button {
    height: 24px;
    width: 24px;
  }

  /* Color/shape of close button cross */
  .bm-cross {
    background: #bdc3c7;
  }

  /* General sidebar styles */
  .bm-menu {
    background: #373a47;
    padding: 2.5em 1.5em 0;
    font-size: 1.15em;
  }

  /* Morph shape necessary with bubble or elastic */
  .bm-morph-shape {
    fill: #373a47;
  }

  /* Wrapper for item list */
  .bm-item-list {
    color: #b8b7ad;
    padding: 0.8em;
  }

  /* Individual item */
  .bm-item {
    display: inline-block;
  }

  /* Styling of overlay */
  .bm-overlay {
    background: rgba(0, 0, 0, 0.3);
  }
`;


export class Menu extends React.Component {
  showSettings(event) {
    event.preventDefault();
  }

  render() {
    return (
      <StyledBurgerMenu>
        <BurgerMenu>
          <a id="home" className="menu-item" href="/">Home</a>
          <a id="about" className="menu-item" href="/about">About</a>
        </BurgerMenu>
      </StyledBurgerMenu>
    );
  }
}

export default Menu;

现在这当然完全没问题.但是，为了吸取教训并使事情变得更优雅，我想通过将前者传递给 styled 来摆脱在 StyledBurgerMenu 内嵌套 BurgerMenu().但是，这会导致汉堡按钮没有样式(根据文档，它透明地覆盖在整个屏幕上，因此我可以单击任意位置打开菜单并查看其他所有内容的样式是否正确).是否可以以这种方式设置汉堡按钮的样式，还是必须使用外部 div?这是我尝试解决此问题的方法:

Now this is of course totally okay. However, to learn a lesson and make things a bit more elegant, I'd like to get rid of nesting BurgerMenu inside of StyledBurgerMenu by passing the former to styled(). However, this leads to the burger button being not styled (as per the docs, it's overlaid transparently across all of the screen, so I can click anywhere to open the menu and see that everything else is styled correctly). Is it possible to style the burger button in this fashion or do I have to use the outer div? Here is how I've tried to solve this:

import React from 'react';
import { slide as BurgerMenu } from 'react-burger-menu';
import styled from 'styled-components';


const StyledBurgerMenu = styled(BurgerMenu)`
  /* Position and sizing of burger button */
  .bm-burger-button {
    position: fixed;
    width: 36px;
    height: 30px;
    left: 36px;
    top: 36px;
  }

  /* Color/shape of burger icon bars */
  .bm-burger-bars {
    background: #373a47;
  }

  /* Position and sizing of clickable cross button */
  .bm-cross-button {
    height: 24px;
    width: 24px;
  }

  /* Color/shape of close button cross */
  .bm-cross {
    background: #bdc3c7;
  }

  /* General sidebar styles */
  .bm-menu {
    background: #373a47;
    padding: 2.5em 1.5em 0;
    font-size: 1.15em;
  }

  /* Morph shape necessary with bubble or elastic */
  .bm-morph-shape {
    fill: #373a47;
  }

  /* Wrapper for item list */
  .bm-item-list {
    color: #b8b7ad;
    padding: 0.8em;
  }

  /* Individual item */
  .bm-item {
    display: inline-block;
  }

  /* Styling of overlay */
  .bm-overlay {
    background: rgba(0, 0, 0, 0.3);
  }
`;


export class Menu extends React.Component {
  showSettings(event) {
    event.preventDefault();
  }

  render() {
    return (
      <StyledBurgerMenu>
        <a id="home" className="menu-item" href="/">Home</a>
        <a id="about" className="menu-item" href="/about">About</a>
      </StyledBurgerMenu>
    );
  }
}

export default Menu;

谢谢！

推荐答案

是否可以以这种方式设计汉堡按钮的样式，或者我有使用外部 div?

Is it possible to style the burger button in this fashion or do I have to use the outer div?

通过将您的 BurgerMenu 传递给样式，您不会添加外部 div，样式组件仅确保将您的 css 添加到文档并将 className 传递给 <代码>汉堡菜单.所以为了让它工作，BurgerMenu 必须渲染它的 className 属性.如果这样做，它将在没有外部 div(或任何其他父级)的情况下工作.

By passing your BurgerMenu to styled, you are not adding an outer div, the styled component only ensures your css is added to the document and passes the className to BurgerMenu. So in order for this to work, BurgerMenu has to render its className prop. If it does that it will work without an outer div (or any other parent).

根据https://github.com/negomi/react-burger-menu/blob/95a58dd41e546730f5661dd7ad8deb7296a725ff/src/menuFactory.js#L251 它将它的 className 属性分配给一个内部 div，这对于 styled-components 但您的样式将应用于该 div.如果您想在该级别或更高级别设置其他元素的样式，您将需要想出一些花哨的选择器或从外部分配它们.

According to https://github.com/negomi/react-burger-menu/blob/95a58dd41e546730f5661dd7ad8deb7296a725ff/src/menuFactory.js#L251 it assigns its className prop to an inner div, which is not ideal for styled-components but your styles will apply to that div. If you want to style the other elements at or above that level, you will either need to come up with some fancy selectors or assign them from outside.

这篇关于如何将样式应用到带有样式组件的 react-burger-menu 按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！