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

Question

我有以下 ui-组件：

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

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

我想做的是删除样式属性并让样式组件处理边距底部...所以我现在有：

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 -- 我可以让样式组件像 style 那样神奇地添加 px 吗？或者我是否需要将我的应用程序从传递 marginBottom 8 更新为 8px ？

Answer 1

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

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

或者您可以创建一个 const 并在其后添加。

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

How to pass marginBottom to a styled component?

reactjs

styled-components