Несколько проверок пропеллера в стилизованных компонентах - PullRequest
Новая
       42

Несколько проверок пропеллера в стилизованных компонентах

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

Я знаю, что в styleled-компонентах я могу сделать проверку на опору следующим образом:

${props => { if (props.size)...return...

Однако из того, что я могу сказать, если я хочу сделатьвторая проверка реквизита, затем мне нужно начать все сначала:

${props => { if (props.color)...return...

Меня интересует, есть ли способ сделать только один ${props... с разными возвратами для разныхдела?

Если да, есть идеи как?

Спасибо.

Ответы [ 2 ]

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;
1 голос
/ 14 мая 2019

Theres пакет под названием styled-is , который может помочь вам сделать это простым и понятным способом.

...