时间戳

首页 > 解决方案 > styled-components：基于其他样式的动态css属性（margin基于font-size）

styled-components - styled-components：基于其他样式的动态css属性（margin基于font-size）

问题描述

我想将我的边距基于组件的字体大小，就像这样：

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'};
`

我这样做的原因不仅是为了避免重复自己，还因为在我的设计系统中我多次扩展组件，因此手动重复当前组件的 font-size 容易出错（可能来自一些一个完全不同的文件中的早期扩展组件）。

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

标签： styled-components

解决方案

我找到了一个解决方案，不是很优雅，但很有效。我使用允许手动将道具传递给样式化组件的.attrs构造函数：

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
`

推荐阅读