Эта статья является частью 2 серии Как начать с Gatsby JS.
Шаг 5. Типографика - динамический компонент и стилизованная система
Что касается типографики, сначала я думаю о создании компонента для каждого стиля текста и его импорте по мере необходимости.
Однако не все текстовые стили имеют одинаковые HTML-теги. Подготовка нескольких одинаковых текстовых стилей с другими тегами кажется не лучшим решением.
К счастью, Dynamic Component позволяет применять к компоненту любой HTML-элемент.
Чтобы создать типографику, используйте Styled System - отзывчивый, основанный на теме стиль реквизита для создания систем дизайна с React. Стилизованная система работает со стилизованным компонентом и большинством других библиотек css-in-js.
Первый шаг - установить в системном стиле через yarn. Пожалуйста, запустите эту команду в терминале:
$ yarn add styled-system
Создайте DynamicComponent.js в глобальном каталоге.
Импортируйте необходимые функции стиля из системы стилей и добавьте их в аргумент стилей компонента. У этого компонента будет четыре доступных свойства стиля: fontSize, color, fontWeight и lineHeight.
global / DynamicComponent.js
import styled from 'styled-components'; import { lineHeight, fontSize, color, fontWeight, } from 'styled-system';
const StyledDynamicComponent = styled.p` ${lineHeight} ${fontSize} ${color} ${fontWeight} `;
export default StyledDynamicComponent;
По умолчанию я установил свой StyledDynamicComponent как абзац.
Перейдите в theme / index.js и создайте объект textStyles (в существующем объекте темы), включая стили для заголовка и стиль текста. После добавления ThemeProvider StyledDynamicComponent имеет доступ к свойствам, определенным в объекте textStyles.
textStyles: {
heading1: {
fontSize: ['32px', '42px', '52px'],
color: '#000',
fontWeight: 800,
},
textStyle1: {
fontSize: '16px',
color: '#000',
fontWeight: 400,
lineHeight: '1.4',
},
},
Все функции styled-system принимают массивы в качестве значений для быстрой установки стилей с использованием подхода, ориентированного на мобильные устройства. На четвертом шаге (о медиа-запросах) этого руководства я определил массив точек останова. Теперь массив fontSize установит размер шрифта на соответствующую ширину экрана.
Пришло время создать компонент стиля заголовка и текста с помощью DynamicComponent. Перейдите в components / Typography / index.js.
import styled from 'styled-components' import DynamicComponent from '../../global/DynamicComponent'; import theme from '../../theme';
const { heading1, textStyle1 } = theme.textStyles;
const createTypoComponent = props => { const TypoComponent = styled(DynamicComponent)``
TypoComponent.defaultProps = { ...props, };
return TypoComponent };
export const Heading1 = createTypoComponent(heading1); export const TextStyle1 = createTypoComponent(textStyle1);
Давайте визуализируем заголовок с тегом h1, используя ‘as’ и TextStyle с абзацем по умолчанию.
pages / index.js
import { Heading1, TextStyle1 } from '../components/Typography';
const IndexPage = () => ( <ThemeProvider theme={theme}> <Layout> <Header/> <Heading1 as="h1">This is Heading1 with H1 tag</Heading1> <TextStyle1>This is TextStyle1 with p tag by default</TextStyle1> </Layout> </ThemeProvider> );
В результате вы получили отзывчивый компонент с возможностью управления тегом.
Вы можете переопределить значение стиля вашей темы или добавить новое свойство.
<TextStyle1 color="#fff" bg="#744c9d">This is TextStyle1 with p tag</TextStyle1>
Результат:
Наконец, добавьте в истории типографику.
Typography / index.stories.js
import React from 'react'; import { storiesOf } from '@storybook/react';
import { Heading1, TextStyle1 } from '../Typography';
storiesOf('Typography', module) .add('headings', () => ( <Heading1>Heading1</Heading1> )) .add('text styles', () => ( <TextStyle1>TextStyle1</TextStyle1> ));
И проверьте свой сборник рассказов:
Продолжение следует…
На этом пока все.
В последней части вы узнаете о Gatsby Image.