Ребас текст и типографика компонентов заголовков
Возникли проблемы с изменением типографики по умолчанию для 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