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

Question

作为一名新手程序员，使用React for前端处理个人项目。

我想创建一个使用styled-components包的按钮组件，可以在应用程序中重新使用在略有不同的大小，颜色和悬停行为。按钮可能会出现在单独的帖子中，在导航栏中，表单等等。到目前为止，我只在几种情况下使用过它，组件的代码已经变得有点笨拙了。现在看起来是这样的：

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)来扩展它们来重复代码，但我想知道，根据经验丰富的人的说法，什么才是好的性能明智和代码库可维护性明智。文档和大量的在线研究还没有给出一个好的答案。

Answer 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) };
`;

这只是一个粗略的想法。可能对你的情况有效。