保证金属性未作为道具传递

【问题标题】：Margin property not being passed as props保证金属性未作为道具传递
【发布时间】：2020-01-16 00:54:36
【问题描述】：

我有一个样式化的组件，它会接收一个道具，所以它会告诉它是应该给它一个左边距还是右边距。

我认为我遇到了语法问题

我会粘贴一些代码：

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;

当我尝试在组件内部向左或向右传递时，它不会占用任何边距。可以做些什么来修复粗体句的语法

【问题讨论】：

标签： css reactjs styled-components

【解决方案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;`}

【讨论】：