如何使用样式组件对自己的组件（响应头）进行样式设置？

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组件：

我想这就是问题所在。 我是否可以像使用li一样在样式自定义组件中引用html标签？ 因为那似乎不起作用。 但是，当我设置常规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 ：

如果使用styled（MyComponent）表示法，并且MyComponent不呈现传入的className属性，则将不应用任何样式。 为避免此问题，请确保您的组件将传入的className附加到DOM节点 ：

因此，我需要一个由组件渲染的“父” html节点，以接收带有样式组件样式的className道具：

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>