2

我知道在样式组件中,我可以检查这样的道具:

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

但是,据我所知,如果我想进行第二次道具检查,那么我需要重新开始:

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

我想知道的是,是否有一种方法可以${props...针对不同的情况只做不同的回报?

如果是这样,知道怎么做吗?

谢谢。

4

3 回答 3

3

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

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

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

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

  `
);
于 2020-07-18T01:19:55.087 回答
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;
于 2019-05-14T18:28:34.927 回答
1

有一个名为styled-is的包可以帮助您以一种干净、漂亮的方式完成此操作。

于 2019-05-14T18:11:52.250 回答