Используйте реквизит для переключения ширины, используя миксин в стиле компонентов

Question

Технология используется - Стилизованные компоненты и реагируют

У меня есть миксин, чтобы сделать мое приложение отзывчивым

import { css } from 'styled-components';

export default {
  smallScreen: (...args: any) => css`
    @media (max-width: 600px) {
      ${css(...args)}
    }
  `,
}

В другом реактивном компоненте я хочу использовать определенный выше метод для написания CSS, применяемого на маленьких экранах.

const SideNavWrapper = styled.article`
  background: red; // this works
  width: ${props => props.expanded ? '260px' : '80px'}; // this works

  ${media.smallScreen({
    background: 'yellow', // this works
    width: `${props => props.expanded ? '100%' : '20px'}`, // this doesn't work. props is undefined.
  })}
`;

В зависимости от props.expanded, я хочу переключить ширину SideNavWrapper. Однако это не работает на небольших экранах. Цвет фона меняется, как и ожидалось, но не ширина. После отладки я понял, что реквизит не определен. Есть идеи, что мне не хватает? Большое вам спасибо!

Answer 1

Еще один способ, который вы могли бы использовать, и, на мой взгляд, он был бы намного чище и, следовательно, более понятен, это:

const getCorrectWidth = ({ expanded }) => (
  expanded
    ? 260
    : 80
);

const getCorrectSmallWidth = ({ expanded }) => (
  expanded
    ? '100%'
    : '20px'
);

const SideNavWrapper = styled.article`
  background: red;
  width: ${getCorrectWidth}px;

  ${media.smallScreen`
    background: yellow;
    width: ${getCorrectSmallWidth}
  `}
`;

Выше есть четкие функции, которые сообщают разработчику, что они делают. Синтаксис также выглядит чистым.

Answer 2

Вы бы попробовали:

${props => {
return (media.smallScreen({
  background: 'yellow', 
  width: `${props.expanded ? '100%' : '20px'}`,
}))
}}