Как правильно организовать стили для дизайн-системы?

К примеру есть компонент кнопки (Button). У него три размера.
Для изменения размера кнопки нужно считывать ширину экрана пользователя и менять соответствующий props (size) или прописывать media запросы для разной ширины экрана. Какие стили лучше использовать inline, jss и модульный css ?
  • Вопрос задан
  • 114 просмотров
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Надо в первую очередь в отталкиваться от задач.
Если в вашем проекте несколько размеров кнопок для одного разрешения, несколько стилей, то необходимо передавать соответствующие свойства:
<Button size="sm" type="outline" color="danger" />

Если кнопка при любом значении size должна адаптироваться под разные разрешения, то имеет смысл использовать медиазапросы.

На примере styled-components:
const StyledButton = styled.button`
  height: ${props => props.height.sm}px;

  ${media.md`
    height: ${props => props.height.md}px;
  `}

  ${media.lg`
    height: ${props => props.height.lg}px;
  `}
`;

const getHeightProp = size => {
  switch(size) {
    case 'sm':
      return { ... };
    case 'md':
      return {
        sm: 32,
        md: 48,
        lg: 64,
      };
    case 'lg':
      return { ... };
  }
};

const Button = ({ size }) => {
  return <StyledButton height={getHeightProp(size)} />;
}

При использовании других инструментов используют селекторы, модификаторы, объекты стилей и тп.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы