Ребас текст и типографика компонентов заголовков

Возникли проблемы с изменением типографики по умолчанию для Rebass и компонентов в теме. Согласно документам Rebass, «компоненты Text и Heading используют пользовательский объект theme.text». Глядя наtypesдля темы Rebass они указывают, что компонент будет использоватьtheme.text.defaultобъект, если он определен:

      // @theme-ui/css/dist/declarations/src/types.dt
/**
* Text style variants can be defined in the `theme.text` object. The `Text`
* component uses `theme.text.default` as its default variant style.
*
* @see https://theme-ui.com/theme-spec#variants
* @see https://theme-ui.com/components/variants
* @see https://theme-ui.com/components/text#variants
*/
text?: Record<string, ThemeUIStyleObject>;

При попытке установить их в теме на основе документов обновления не применяются ни к компонентам, ни к компонентам:

      export const theme: Theme = {
  fonts: {
    heading: 'Brush Script MT',
    text: 'Arial, sans-serif',
  },
  text: {
    default: {
      fontFamily: 'text',
    },
    heading: {
      fontFamily: 'heading',
    },
  },
}

<Text>Some dummy text</Text>
<Heading>Some dummy heading</Heading>

Еслиrootобъект установлен в теме, типографика будет применена к компоненту, но не к :

      styles: {
  root: {
    fontFamily: 'text',
  }
}

Взгляд на предустановленную тему Rebass добавляет немного путаницы, вотtextобъект:

      // rebass variants
  text: {
    heading: {
      fontFamily: 'heading',
      lineHeight: 'heading',
      fontWeight: 'heading',
    },
    display: {
      fontFamily: 'heading',
      fontWeight: 'heading',
      lineHeight: 'heading',
      fontSize: [ 5, 6, 7 ],
    },
    caps: {
      textTransform: 'uppercase',
      letterSpacing: '0.1em',
    },
  },

Означает ли это, чтоdisplayиcapsследует использовать в качестве компонента? Если да, то как насчетdefault? При попытке:<Text variant="display">это не работает.

Просто нужно немного прояснить, как это должно работать, так как в документации Rebass не так много информации . Цель состояла бы в том, чтобы установить типографику по умолчанию для каждого и иметь возможность при необходимости переопределить, передав a компонентам или . Похоже, это намерение, но все попытки его использовать терпят неудачу. Настройка<Text>по умолчанию черезstyles.rootобъект был бы в порядке, однако было бы неплохо иметь возможность переопределить с помощьюvariantкогда это необходимо и<Heading>типографику все равно нужно как-то установить. Ваши мысли, идеи, отзывы ценятся, спасибо!

Вот некоторые связанные проблемы/коммиты из Rebass Github :
https://github.com/rebassjs/rebass/issues/781 https://github.com/rileybracken/rebass/commit/8214661166f92417593b197af950e5229b1a3054https://github.com/rebassjs/rebass/проблемы/722

0 ответов

Другие вопросы по тегам