Question

我已经在我的一个项目中开始使用styled-components。我想知道在使用它的容器中覆盖/扩展它们的推荐方法。

例如：

可重用的Button组件：

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid red;
  color: red;
`;

现在假设我在一节中使用了它，但是需要应用一个左边距。我可以通过以下两种方式做到这一点：

扩展：

const NewButton = styled(Button)`
  margin-left: 10px;
`;

内嵌样式：

<Button style={{marginLeft: '10px'}}>Normal Button</Button>

如果要覆盖的规则超过3,4条，则扩展似乎是最好的方法。

但是要说一个像margin，padding，display: none这样的规则可能会经常发生，每次创建一个新的包装器都会增加很多样板。内联样式在这方面效果很好，但是它们有自己的pitfalls。

可以在大型应用程序之间很好地扩展的最佳方法是什么？

Answer 1

对于在使用中可能会略有不同的样式，我建议使用样式内的props对象在定义属性之前先计算属性。

这样，您的按钮可能看起来像这样：

// style that will always apply margin-left even if it doesn't exist
const Button = styled.button`
  margin-left: ${props => props.marginLeft}
`
// style that won't apply margin-left if it doesn't exist
const Button = styled.button`
  ${props => props.marginLeft && `
    margin-left: ${props.marginLeft};
  `}
`

// button with margin-left: 10px
<Button marginLeft="10px" />

// button without margin-left
<Button />

要实现此目标还需要做更多的工作，但是当样式可以在相似元素之间更改时，这是值得的。

可重用的样式组件中的细微调整

1 个答案: