Маржинальная собственность не передается как реквизит

Question

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

Мне кажется, у меня проблема с синтаксисом

I вставит некоторый код:

const FormDiv = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex: 1;
  position: relative;
  ${({ left }) =>
    css`
     *** margin${'-'}${left ? 'right' : 'left'}: 30vw; ***
    `};

  @media ${device.mobileS} {
    height: 100%;
    flex-grow: 1;
  }
  @media ${device.tablet} {
    height: 100vh;
    width: 100%;
  }
`;

export default FormDiv;

Когда я пытаюсь пройти влево или вправо внутри компонента, он не требует никакого запаса. Что можно сделать, чтобы исправить синтаксис жирного предложения

Answer 1

Из https://styled-components.com/docs/faqs#can -i-nest-rules

const FormDiv = styled.div`
  ...

  ${props => props.left ? "margin-right" : "margin-left"}: 30vw;

  ...
`

или

  ${props => props.left 
      ? 'margin-right: 30vw;'
      : 'margin-left: 30vw;'}

или

  ${props => props.left 
      ? css`margin-right: 30vw;`
      : css`margin-left: 30vw;`}

или

  margin-right: 30vw;

  ${props => props.left && css`
       margin-right: unset;
       margin-left: 30vw;`}