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

时间:2018-07-09 16:08:06

标签: javascript reactjs styled-components

我想在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;

现在这完全可以了。但是,要学习一堂课并使事情变得更加优雅,我想通过将BurgerMenu传递给StyledBurgerMenu来摆脱在styled()内嵌套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; ?这是我尝试解决此问题的方法:

col1 col2 col3
2 3 string1
3 4 string2
5 6 string3

df = pd.read_csv(path-to-log, header=None)
df.dtypes

0 object
1 object
2 object

谢谢!

2 个答案:

答案 0 :(得分:1)

  

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

通过将BurgerMenu传递给样式,您没有添加外部div,样式化组件仅确保将CSS添加到文档并将className传递给BurgerMenu。因此,为了使其正常工作,BurgerMenu必须呈现其className道具。如果这样做,它将在没有外部div(或任何其他父级)的情况下正常工作。

根据https://github.com/negomi/react-burger-menu/blob/95a58dd41e546730f5661dd7ad8deb7296a725ff/src/menuFactory.js#L251,它会将其className道具分配给一个内部div,这对于styled-components来说并不理想,但是您的样式将应用于该div。如果要在该级别或更高级别设置其他元素的样式,则需要使用一些精美的选择器或从外部进行分配。

答案 1 :(得分:0)

由于the way styled-components work

,这是不可能的

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