Question

我有以下ui组件：

const StyledLabel = styled.div`
  color: ${(props) => props.theme.colors.black};
`;

const Label = ({
  text,
  marginBottom,
}) => (
  <StyledLabel
    style={{ marginBottom }}
  >
    {text}
  </StyledLabel>
);

我想要做的是删除样式属性并使样式组件处理margin-bottom ...所以我现在有：

const StyledLabel = styled.div`
  color: ${(props) => props.theme.colors.black};
  margin-bottom: ${(props) => props.marginBottom};
`;

const Label = ({
  text,
  marginBottom,
}) => (
  <StyledLabel
    marginBottom={marginBottom}
  >
    {text}
  </StyledLabel>
);

以上问题是应用于元素的CSS是：

margin-bottom: 8;

不是理想的8px - 我可以让样式组件以px的方式神奇地添加style吗？或者我是否需要将我的应用从marginBottom 8更改为8px？

Answer 1

嘿，为什么你想要将css规则与你的组件混合，我认为你可以发送不同的className并在css中创建file.css规则会更容易管理。但是，如果您想继续使用代码，则只需添加px

即可

margin-bottom: {${props.marginBottom}px`};

或者您可以创建const并在之后添加。

如何将marginBottom传递给样式化组件？

1 个答案: