@2gis-kit/css NPM

Kit styles

Библиотека CSS-in-JS основанная на Emotion.

Основные концепции заимствованы из Mantine UI Kit (v6).

Источники кода:

Установка

npm install @2gis-kit/css

Использование

Оберните корневой компонент в KitProvider

import { KitProvider } from '@2gis-kit/css';

function Demo() {
  return (
    <KitProvider>
      <App />
    </KitProvider>
  );
}

Теперь вы можете использовать библиотеку.

Тема

Объект темы содержит различные объекты (цвета, логотипы, шрифты). Для настройки темы вы можете использовать KitProvider:

import { KitProvider } from '@2gis-kit/css';

function Demo() {
  return (
    <KitProvider theme={
      {
        colors: {
          primary: { 
            main: '#19AA1E'
          }
        }
      }
    }>
      <App />
    </KitProvider>
  );
}

Написание стилей

Для созданий стилей используется функция createStyles.

import { createStyles } from '@2gis-kit/css';

const useStyles = createStyles((theme) => ({
  root: {
    display: 'block',
    width: '100px',
    height: '100px',
    backgroundColor: theme.colors.primary.main
  }
}));

function Demo() {
  const { classes } = useStyles();

  return (
    <div className={classes.root}>createStyles demo</div>
  );
}

createStyles

Метод createStyles позволяет создавать таблицы стилей в привычном виде, а также имеет несколько дополнительных функций.

Псевдоклассы

import { createStyles } from '2gis-kit/css';

const useStyles = createStyles((theme) => ({
  button: {
    color: theme.white,
    
    '&:hover': {
      backgroundColor: theme.colors.primary.main,
    },

    '&:not(:first-of-type)': {
      backgroundColor: theme.colors.primary.dark_1,

      // pseudo-classes can be nested
      '&:hover': {
        backgroundColor: theme.colors.primary.dark_2,
      },
    },
  },
}));

function Demo() {
  const { classes } = useStyles();
  return (
    <div>
      <button type="button" className={classes.button}>
        First
      </button>
      <button type="button" className={classes.button}>
        Second
      </button>
      <button type="button" className={classes.button}>
        Third
      </button>
    </div>
  );
}

Параметры

Вторым аргументом createStyles принимает набор произвольных параметров (аналогично React компонента).

interface ButtonProps {
  radius: number;
}

const useStyles = createStyles((theme, { radius }: ButtonProps) => ({
  button: {
    color: theme.white,
    backgroundColor: theme.black,
    borderRadius: radius,
    border: 0,
    cursor: 'pointer',
  },
}));

function Button({ color, radius }: ButtonProps) {
  const { classes } = useStyles({ radius });
  
  return (
    <button type="button" className={classes.button}>
      Button
    </button>
  );
}

function Demo() {
  return (
    <>
      <Button radius={5} />
      <Button radius={50} />
    </>
  );
}

Слитие классов (cx)

Для слития классов в один метод createStyles возвращает метод cx. Важно использовать именно его, чтобы избежать коллизий.

import { useState } from 'react';
import { createStyles } from '@2gis-kit/css';

const useStyles = createStyles((theme) => ({
  button: {
    backgroundColor: theme.white,
  },
  
  active: {
    backgroundColor: theme.black,
  },
}));

function Demo() {
  const [active, setActive] = useState(0);
  const { classes, cx } = useStyles();

  return (
    <div>
      <button
        className={cx(classes.button, { [classes.active]: active === 0 })}
        onClick={() => setActive(0)}
        type="button"
      >
        First
      </button>
      <button
        className={cx(classes.button, { [classes.active]: active === 1 })}
        onClick={() => setActive(1)}
        type="button"
      >
        Second
      </button>
    </div>
  );
}