Question

我正在尝试使用样式化组件来实现基于材料设计的按钮组件。该组件将具有许多道具（例如大小，图标，浮动等）。

但是，管理道具的所有各种组合变得越来越不堪重负。

例如，按钮有三种尺寸：默认，小和大。

但是，小按钮的大小会根据是常规按钮还是浮动按钮而变化。大按钮也是如此。

所以我有以下尺寸：

小
小浮空
默认
浮动
大
大浮空

当然，我还有其他未列出的组合。

结果是，我的代码开始有些混乱，因为我不仅要检查道具（${props => { if (props.floating)...）的存在，还要检查该道具是否与另一个道具（${props => { if (props.floating && props.small)...）。

这样，我想知道是否有人对处理大量组合时如何最好地组织和构造道具有任何建议？

谢谢。

Answer 1

请记住，您可以在实例化中进行重构。例如，您可能会这样写：

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

它将减少一些膨胀。

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;

如果给出这些值，结果将是：

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;

Answer 3

我使用一个名为styled-is的软件包来帮助样式化组件样式化，它附带了一些辅助功能，您可以直接将它们与样式化组件一起使用。

处理样式化组件中的道具组合

3 个答案: