Как стилизовать мои собственные компоненты (адаптивный заголовок) с помощью styled-компонентов?

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 navbar.Так как ссылки будут одинаковыми в каждом случае, я думаю, что я должен повторно использовать 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, тогда стили не будут применены.Чтобы избежать этой проблемы, убедитесь, что убедитесь, что ваш компонент присоединяет переданное имя класса к узлу 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>