Обработка комбинаций реквизита в стилизованных компонентах - PullRequest
Новая
       40

Обработка комбинаций реквизита в стилизованных компонентах

0 голосов
/ 14 мая 2019

Я пытаюсь реализовать компонент кнопки на основе материала с использованием styled-компонентов.Компонент будет иметь несколько реквизитов (например, размер, значок, плавающий и т. Д.).

Тем не менее, управлять всеми различными комбинациями реквизита становится все труднее.

Например, кнопки бывают трех размеров: по умолчанию, маленькие и большие.

Но размер маленькой кнопки изменяется в зависимости от того, является ли это обычная кнопка или плавающая кнопка.То же самое касается большой кнопки.

Итак, у меня есть следующие размеры:

  • Маленький
  • Маленький Плавающий
  • По умолчанию
  • Плавающий
  • Большой
  • Большой Плавающий

И, конечно, у меня есть другие комбинации, которые я не перечислил.

В результате мой код начинает становиться немного запутанным, поскольку мне приходится не только проверять наличие подпорки (${props => { if (props.floating)...), но также и то, существует ли этот конкретный подпор в комбинациис другой опорой (${props => { if (props.floating && props.small)...).

Поэтому мне интересно, есть ли у кого-нибудь предложения о том, как лучше организовать и структурировать реквизит при работе с большим количеством комбинаций?

Спасибо.

Ответы [ 3 ]

1 голос
/ 14 мая 2019

Я предпочитаю хранить свои CSS отдельно, как в файле styles.js.Возьмите следующий код для примера.Это поддерживает организованность CSS и делает реализацию различных опций довольно чистой.Конечно, добавьте ваш CSS в соответствующие определения 

//styles.js
import { css } from 'styled-components';

export const buttonbase = css`/*base styles for all buttons*/`;
export const small = css`/*small size styles*/`;
export const medium = css`/*default size styles*/`;
export const large = css`/*large size styles*/`;
export const floating = css`/*float styles*/`;

И в файле вашего компонента: 

//Button.js
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import * as Styles from './styles';

const propTypes = {
  floating: PropTypes.bool,
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  children: PropTypes.node,
};

const defaultProps = {
  floating: false,
  size: 'medium',
};

const ButtonBase = styled.button`
  ${Styles.buttonbase};
  ${props => (props.floating ? Styles.floating : '')};
  ${props => Styles[props.size]};
`;

const Button = ({ floating, size, children, ...rest }) => (
  <ButtonBase
    size={size}
    floating={floating}
    {...rest}
  >
    {children}
  </ButtonBase>
);

Button.propTypes = propTypes;
Button.defaultProps = defaultProps;

export default Button;

Результат будет, скажем, с учетом следующих значений: 

export const buttonbase = css`
  border: 1px solid black;
  padding: 10px;
`;
export const medium = css`
  font-size: 16px;
  height: 30px;
`;
export const floating = css`
  float: left;
`;

И этот компонент: 

<Button size="medium" floating />

Компонент <ButtonBase/> объединяет buttonbase, medium и floating из импортированных стилей, генерируя полный стиль: 

  border: 1px solid black;
  padding: 10px;
  font-size: 16px;
  height: 30px;
  float: left;
1 голос
/ 14 мая 2019

Я использую пакет styled-is , чтобы помочь стилизовать мои styleled-компоненты, он поставляется с вспомогательными функциями, которые вы просто используете непосредственно с styled-component.

1 голос
/ 14 мая 2019

Имейте в виду, что вы можете разрушить в своем экземпляре.Например, вы можете написать так: 

${({ floating, small }) => {
    if (floating && small){
    ...
    }
}

Это сократит часть раздувания.

...