Question

我要以组件的字体大小为基础，这样：

const H1 = styled.h1`
  font-size: ${props => props.theme.fontSizes.large + 'px'};
  margin: ${props => props.theme.fontSizes.large * 3 + 'px'};
`

但是，我不想在空白处重复对ThemeProvider主题道具的引用，但我想这样做：

const H1 = styled.h1`
  font-size: ${props => props.theme.fontSizes.large + 'px'};
  margin: ${H1.styles['font-size'] * 3 + 'px'};
`

之所以这样做，不仅是为了避免重复我自己，而且还因为在我的设计系统中我多次扩展了组件，因此手动重复当前组件的字体大小很容易出错（这可能会来自完全不同的文件中的一些早期扩展组件。

任何想法如何优雅地解决这个问题？谢谢！

Answer 1

我找到了一个解决方案，虽然不是超级优雅，但可以。我使用.attrs constructor，它可以将道具手动传递给样式化的组件：

const H1 = styled.h1.attrs({
  fontSize: props => props.theme.fontSizes.large
})`
  font-size: ${props => props.fontSize + 'px'};
  margin: ${props => props.fontSize * 3 + 'px'};
`

或者看一个更复杂的例子，其中的用途变得更加清楚（当我们定义具有特定字体大小的组件时，稍后扩展该组件，然后然后基于以前的字体大小）：

const Heading = styled.h1.attrs({
  fontSize: props => props.theme.fontSizes.large
})`
  font-size: ${props => props.fontSize + 'px'};
`

const HeadingWithMargin = Heading.extend`
  margin: ${props => props.fontSize * 3 + 'px'}; // this extended component still has access to the passed props
`

样式组件：基于其他样式的动态css属性（基于字体大小的边距）

1 个答案: