带有样式系统的每个字体大小的管理器行高

Question

样式化组件有一个组合实用程序，可以将多个样式化系统功能组合在一个组件中。我想根据默认数组将 lineHeight 和 fontSize 组合在一起。

而不是做：

  <Heading type="h1"
     fontSize={[ 1, 2, 3 ]}
     lineHeight={[1 , 2, 3 ]}
     color={theme.colors.heading.tinted}
  >

我只想实现一个结合了 fontSize 和 lineHeight 的字体道具。

<Heading type="h1"
     font={[ 1, 2, 3 ]}
     color={theme.colors.heading.tinted}
  >

标题.jsx

const Element = styled('div')(
    space,
    color,
    compose(
        fontSize,
        lineHeight
    )
);

主题.js

const theme = {
    fontSizes: [11, 13, 16, 23, 29, 37, 47, 76, 97],
    lineHeights: ['12px', '12px', '12px', '32px', '32px', '40px', '48px', '56px', '72px', '80px', '104px']
}

Answer 1

我根据您的要求创建了一个代码框示例： 整个文件都在这里： https://codesandbox.io/s/styled-component-basic-j3zpx

<Title font={[50, 45]}>
        This is a heading includes first array index for font size and second array for line height.

      </Title>

样式化 css：

export const Title = styled.h1`
  color: red;
  margin: 0;
  border: 1px solid black;
  ${props =>
    props.font &&
    css`
      font-size: ${props => (props.font[0] ? `${props.font[0]}px` : "20px")};
      line-height: ${props => (props.font[1] ? `${props.font[1]}px` : "30px")};
    `}
`;