Skip to content

styling.md

Latest commit

 

History

History
123 lines (106 loc) · 4.47 KB

styling.md

File metadata and controls

123 lines (106 loc) · 4.47 KB

Стилизация интерфейсов

Используемые технологии

Стилизация интерфейсов производится посредством библиотек JSS и React-JSS. Обязательно нужно прочесть документацию. Стили для компоненты MyComponent следует писать в файле MyComponent.style.ts рядом с файлом компонента.

Основные плюсы использования такого подхода к написанию стилей:

  • Поддержка темы.
  • Критический CSS.
  • Ленивая стилизация - стили создадутся только тогда, когда компонент будет примонтирован.
  • Автоматическое добавление/удаление - стили добавляются в DOM когда компонент монтируется и удаляются когда ни одному компоненту эти стили не нужны.
  • Функциональные свойства и правила автоматически обновляются от пропсов компоненты.
  • С помощью плагинов можно расширить возможности, например, добавить автопрефикс или поддержку RTL.

Базовый пример стилизации

Файл MyComponent.style.ts:

import injectSheet, { WithStyles } from 'react-jss';
// хелпер rule ничего не делает, просто добавляет автодополнение для объекта стилей
import { rule } from 'shared/helpers/style';

const styles = {
  root: rule({
    flexGrow: 1,
    minHeight: '100%',
  }),
  content: rule({
    flexGrow: 1,
  }),
};

// HOC, в который нужно обернуть стилизуемый компонент
export const provideStyles = injectSheet(styles);

// Тип пропсов, которые HOC provideStyles пробросит в оборачиваемый компонент. В данном случае это:
// interface StylesProps {
//   classes: Record<'root' | 'content', string>;
// }
export type StylesProps = WithStyles<typeof styles>;

Файл MyComponent.tsx:

import React from 'react';
import { provideStyles, StylesProps } from './MyComponent.style';

interface IProps {
  content: string;
}

function MyComponent({ content, classes }: IProps & StylesProps) {
  return (
    <div className={classes.root}>
      <div className={classes.content}>
        {content}
      </div>
    </div>
  );
}

export default provideStyles(MyComponent);

Сниппеты и экстеншены для VSCode

Экстеншены

  • Для конвертации CSS стилей в JSS формат и обратно используйте экстеншен CSS to JSS

Сниппеты

"Styles": {
  "prefix": "styl",
  "body": [
    "import injectSheet, { WithStyles, Theme } from 'react-jss';",
    "import { rule } from 'shared/helpers/style';",
    "",
    "const styles = (theme: Theme) => ({",
    "\troot: rule({",
    "\t\t$0",
    "\t}),",
    "});",
    "",
    "export const provideStyles = injectSheet(styles);",
    "",
    "export type StylesProps = WithStyles<typeof styles>;",
    "",
  ],
  "description": "Reducer"
},

"Style rule": {
  "prefix": "rule",
  "body": [
    "${1:ruleName}: rule({",
    "\t$0",
    "}),",
  ],
  "description": "Style rule"
},

Как добавить свою тему

В файле shared/types/global.d.ts нужно добавить следующее объявление:

declare module 'theming/@externals' {
  export interface Theme {
    palette: {
      primary: string;
      secondary: string;
      // ...
    }
    // ...
  };
}

В дальнейшем эту тему можно импортировать из react-jss