Question

我知道在样式化组件中，我可以检查一下这样的道具：

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

但是，根据我的判断，如果我想进行第二次道具检查，那么我需要重新开始：

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

我想知道的是，是否有一种方法可以针对不同情况只用一个${props...获得不同的回报？

如果是这样，知道怎么做吗？

谢谢。

Answer 1

有一个名为styled-is的软件包，可以帮助您以一种干净利落的方式进行操作。

Answer 2

我更喜欢将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;

Answer 3

您可以通过预先访问props对象来简化一些操作。这样重复的次数少了。

const StyledComponent = styled.div(
  (props) => `
    background-color: green;

    ${props.warn && `
      background-color: yellow;
    `}

    ${props.alert && `
      background-color: red;
    `}

  `
);

样式化组件中的多个属性检查

3 个答案: