如何使用已样式化的组件来样式化我自己的组件(响应标头)

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

如果您使用样式化(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>