title: How to apply styles to react-burger-menu button with styled-components?
body: <p>I would like to use <code>styled-components</code> 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 <code>react-burger-menu</code> for the menu. Everything works correctly if I wrap <code>BurgerMenu</code> in a styled <code>div</code> like so (styles copied from <code>react-burger-menu</code> README.md):</p>
  
  <pre><code>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 (
        &lt;StyledBurgerMenu&gt;
          &lt;BurgerMenu&gt;
            &lt;a id="home" className="menu-item" href="/"&gt;Home&lt;/a&gt;
            &lt;a id="about" className="menu-item" href="/about"&gt;About&lt;/a&gt;
          &lt;/BurgerMenu&gt;
        &lt;/StyledBurgerMenu&gt;
      );
    }
  }
  
  export default Menu;
  </code></pre>
  
  <p>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 <code>BurgerMenu</code> inside of <code>StyledBurgerMenu</code> by passing the former to <code>styled()</code>. 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 <code>div</code>? Here is how I've tried to solve this:</p>
  
  <pre><code>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 (
        &lt;StyledBurgerMenu&gt;
          &lt;a id="home" className="menu-item" href="/"&gt;Home&lt;/a&gt;
          &lt;a id="about" className="menu-item" href="/about"&gt;About&lt;/a&gt;
        &lt;/StyledBurgerMenu&gt;
      );
    }
  }
  
  export default Menu;
  </code></pre>
  
  <p>Thanks!</p>