如何使用 styled-components 和 React 有效地为组件添加变体答案

【问题标题】：How to efficiently add variants for components using styled-components and React如何使用 styled-components 和 React 有效地为组件添加变体
【发布时间】：2021-02-23 09:11:33
【问题描述】：

作为新手程序员，正在使用 React 作为前端的个人项目。

我想使用 styled-components 包创建一个 Button 组件，它可以在应用程序中以略微不同的大小、颜色和悬停行为重复使用。按钮可能出现在单个帖子、导航栏、表单等中。到目前为止，我只在少数情况下使用过它，并且组件的代码已经变得有点麻烦了。这是它现在的样子：

import styled from 'styled-components';
import { Link } from 'react-router-dom';

const Button = styled(Link)`
  margin: 5px;
  display: grid;
  place-items: center;
  font-size: 1em;
  padding: 0 1em;
  height: ${props => (props.small ? '35px' : '40px')};
  background: ${props => (props.nav ? props.theme.color.white : '#30336b1a')};
  border-radius: ${props => (props.small ? '3px' : '5px')};
  color: ${props => (props.nav ? props.theme.color.forest : '#30336b')};
  border: ${props =>
    props.outline ? `2px solid ${props.theme.color.forest}` : null};
  text-decoration: none;
  transition: 0.2s ease-in-out;

  &:hover {
    background: ${props => (props.nav ? props.theme.color.forest : '#f6e58d')};
    color: ${props => (props.nav ? props.theme.color.white : null)};
  }
`;

export default Button;

small 和 nav 和 outline 是目前的变体名称，我认为需要添加更多。但是整个props=> props.variant? do-this: or-that; 变得笨拙且难以阅读。

我可以扩展组件并创建多个 ButtonVariant 组件，或者使用 if-else 或 switch 语句来返回适当样式的变体。这两种方法似乎都没有通过使用styled(Button) 扩展它们来重复代码，但我想知道根据经验丰富的人的说法，在性能方面和代码库可维护性方面什么是好的。文档和大量在线研究还没有给出好的答案。

【问题讨论】：

标签： javascript css reactjs styled-components

【解决方案1】：

您可以在外部创建一个函数并从中获取返回值。您可以有条件地检查 if 或 switch() 案例：

const createButton = prop => {
    switch(prop){
       case 'sm':
         return '30px';
       case 'md':
         return '35px';
       //--------------You can add more other properties for cases and return
       default:
         return '40px';
    }
};


const Button = styled(Link)`
  height: ${props => createButton(props) };
`;

这只是一个粗略的想法。可能适用于您的情况。

【讨论】：