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

Posted 2023-02-23

【中文标题】带有样式系统的每个字体大小的管理器行高

【英文标题】：Manager line-height per font-size with styled system

【发布时间】：2020-02-15 03:26:07

【问题描述】：

样式化组件有一个组合实用程序，可以将多个样式化系统功能组合在一个组件中。我想根据默认数组将 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']

【参考方案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");
    `
`;

【讨论】：

@Marc 请告诉我。这是你想要的吗。请投票给答案，如果它是正确的答案，那么检查就是接受的答案。谢谢

我有这个带有样式组件的解决方案，现在我正在使用样式系统。 Styled-system 使用了一个主题。您给道具的值应该在主题文件中两个数组的索引中。如果您说fontSize=[ 1, 2, 3 ]，它会在theme.js 中查找并用于数组中的第一个断点索引1。所以字体大小为 13，第二个断点的字体大小为 16。我不想将这些值分别提供给 fontSize 和 lineHeight，而是想将其组合到一个道具，该道具使用两个数组的值styled-system.com/table#typography

我认为 fontSize=[1,2] 这些断点适用于响应式样式styled-system.com/responsive-styles。我认为您想要的是具有自定义样式的东西styled-system.com/custom-props