如何使用样式组件样式我自己的组件（响应报头）？

Question

我试图建立一个响应头组件。它应该在桌面使用时显示display:inline-block所有的导航链接，它应该在移动时使用display:block显示所有的导航链接。

注：我使用react-responsive做媒体的质疑，因此：

import Responsive from 'react-responsive';

function Mobile(props) {
  return(<Responsive {...props} maxWidth={800}/>);
}

function Desktop(props) {
  return(<Responsive {...props} minWidth={801}/>);
}

<Mobile>将使移动，并<Desktop>将呈现在桌面上。这部分工作正常。我只是不能够相应地改变了风格。

请注意，下面所有的代码里面Header.js。

我目前的做法，这是不工作的，如下：

Header组件

是由我的代码的其余部分出口和消费的一个。它呈现在移动设备上<MobileHeader>和<DesktopHeader>在桌面上。两者都是风格的组成部分。

function Header(props) {
  return(
    <React.Fragment>
      <Mobile>
        <MobileHeader
          authUser={props.authUser}
        />
      </Mobile>
      <Desktop>
        <DesktopHeader
          authUser={props.authUser}
        />
      </Desktop>
  </React.Fragment>
  );
}

HeaderBase组件：

我的两个风格的<MobileHeader>和<DesktopHeader>应的样式组件HeaderBase，这是以下（简化）：

function HeaderBase(props) {
  return(
    <header>
    <div>

      <h1>Header</h1>
      <ul>
        <li>
          <Link to={ROUTES.HOME}>Home</Link>
        </li>
        <li>
          <Link to={ROUTES.ACCOUNT}>Account</Link>
        </li>
      </ul>

    </div>
  </header>
  );
}

题：

MobileHeader和DesktopHeader组件：

我想这里是哪里出了问题。我可以在引用风格的自定义组件里面的html标签，因为我与li做？因为这似乎并没有工作。这时候，我的造型常规HTML标记，虽然工作。

难道你们推荐另一种方法呢？我的最终目标是让您单击的覆盖面导航栏，当用户在移动它来自左边。在桌面上我会经常inline-block导航栏。由于该链接将在每种情况下是相同的，我想我应该重用HeaderBase和使用样式组件相应样式。

const MobileHeader = styled(HeaderBase)`
  li {
    display: block;
  }
`;

const DesktopHeader = styled(HeaderBase)`
  li {
    display: inline-block;
    padding: 5px;
    margin: 0;
    box-sizing: border-box;
  }
`;

Answer 1

刚刚发现了什么是错误的：

由于每styled-components docs：

如果你使用的风格（MyComponent的）符号和MyComponent的不会呈现传入的类名的道具，那么没有风格将被应用。为了避免这个问题，请确保您的组件高度传入的类名的DOM节点：

所以，我需要我的部分呈现给接收的className道具从风格组件的样式的“父”的HTML节点：

function HeaderBase(props) {
  return(
    <header>
    <div className={props.className}>  // <----- NOW IT WORKS!

      <h1>Header</h1>
      <Mobile>☰ I am mobile header</Mobile>
      <ul>
        <li>
          <Link to={ROUTES.HOME}>Home</Link>
        </li>