0

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

但是，管理所有各种道具组合变得相当困难。

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

但是小按钮的大小会根据它是普通按钮还是浮动按钮而变化。大按钮也是如此。

所以我有以下尺寸：

  • 小的
  • 小浮动
  • 默认
  • 漂浮的
  • 大的
  • 大型浮动

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

结果，我的代码开始变得有点复杂，因为我不仅要检查 prop ( ${props => { if (props.floating)...) 是否存在，还要检查该特定 prop 是否与另一个 prop ( ${props => { if (props.floating && props.small)...) 结合存在。

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

谢谢。

4

3 回答 3

3

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

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

它会减少一些膨胀。

于 2019-05-14T17:51:03.050 回答
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生成完整的样式：mediumfloating

  border: 1px solid black;
  padding: 10px;
  font-size: 16px;
  height: 30px;
  float: left;
于 2019-05-14T18:14:14.293 回答
1

我使用了一个名为styled-is的包来帮助设置我的 styled-components 样式，它附带了您直接与 styled-components 一起使用的辅助函数。

于 2019-05-14T18:15:52.003 回答