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：

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

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

1 个答案: