Высота строки менеджера для размера шрифта со стилизованной системой

Question

Стилизованные компоненты имеют утилиту составления, объединяющую несколько функций Styled System в одном компоненте. Я хочу составить 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}
  >

Heading.jsx

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

theme.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")};
    `}
`;