如何将样式应用于带有样式组件的 react-burger-menu 按钮？

Question

我想在 React 应用程序中使用 styled-components 来创建一个菜单组件，该组件包含同一文件中的样式，从而使其非常模块化。我使用react-burger-menu 作为菜单。如果我像这样将BurgerMenu 包装在样式div 中，一切都会正常工作（从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() 来摆脱BurgerMenu 在StyledBurgerMenu 内的嵌套。但是，这会导致汉堡按钮没有样式（根据文档，它透明地覆盖在整个屏幕上，因此我可以单击任意位置以打开菜单并查看其他所有内容的样式是否正确）。是否可以以这种方式设置汉堡按钮的样式，还是必须使用外部 div？以下是我尝试解决此问题的方法：

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;

谢谢！

Answer 1

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

通过将 BurgerMenu 传递给 styled，您并没有添加外部 div，styled 组件仅确保将您的 css 添加到文档中并将 className 传递给 BurgerMenu。所以为了让它工作，BurgerMenu 必须渲染它的className 属性。如果它这样做了，它将在没有外部 div（或任何其他父级）的情况下工作。

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

Answer 2

这是不可能的，因为the way styled-components work

样式应用于子 div，而不是外部 div： Link to code in react-burger-menu