Стилизованная система не преобразует несколько типов типографики в классы - PullRequest
Новая
       20

Стилизованная система не преобразует несколько типов типографики в классы

0 голосов
/ 29 мая 2020

Я создал компонент для стилизации элементов заголовков. Когда я даю ему одну опору из системы стилей, он создает классы out. Например, lineHeight . Когда я даю ему lineHeight и fontSize, он не меняет реквизиты в классы.

Заголовочный компонент: 

import React from 'react';
import styled from 'styled-components';
import { typography } from 'styled-system';

const common = {
  whiteSpace: 'nowrap',
  textOverflow: 'ellipsis',
  overflow: 'hidden',
  margin: '0',
};

const HeadingElem = styled.div`
  ${common}
  ${typography}
`;

const Heading = (props) => {
  return <HeadingElem {...props} />;
};
export default Heading;

Когда я использую его с двумя реквизитами: 

 <Heading lineHeight={4} fontSize={4}>
        Your profile
 </Heading>

Результат - классы + 1 опора: enter image description here

Когда я даю ему одну опору: 

<Heading lineHeight={4}>Your profile</Heading>

Результат - это то, что Я ожидал, что теперь опора - это классы: enter image description here

Итак, чтобы проверить это с чем-то еще, я создал элемент Box: 

import styled from 'styled-components';

import { flexbox, layout, space } from 'styled-system';

export const Box = styled.div`
  ${layout}
  ${flexbox}
  ${space}
`;

Я даю ему несколько реквизитов : 

<Box
  display={{ sm: 'flex' }}
  alignItems={{ sm: 'center' }}
  justifyContent={{ sm: 'space-between' }}
  mb={4}
></Box>

И все равно классы из него не создает. Это поведение по умолчанию? Потому что я не вижу ничего подобного на веб-сайте стилизованной системы: https://styled-system.com/ enter image description here

...