css - 使用样式组件创建变体的方法

Question

使用样式组件创建变体的最佳方法是什么？继承人我目前在做什么。

  const ButtonStyle = styled.button`
  padding:8px 20px;
  border:none;
  outline:none;
  font-weight:${props => props.theme.font.headerFontWeight};
  font-size:${props => props.theme.font.headerFontSize};
  display:block;
  &:hover{
    cursor:pointer;
  }
  ${({ variant }) =>
    variant == 'header' && css`
    background-color:${props => props.theme.colors.lightblue};
    color:${({ theme }) => theme.colors.white};
    &:active{
      background-color:${props => props.theme.colors.blue}
    }
    `
  }
  ${({ variant }) =>
    variant == 'white' && css`
    background-color:white;
    color:${({ theme }) => theme.colors.lightblue};
    &:active{
      color:${props => props.theme.colors.blue}
    }
    `
  }
`;

我不知道这是否是做事的标准方式。
我也一直在使用其他组件作为基础来创建其他组件，同时更改一些东西
例如

  const InnerDiv = styled(otherComponent)`
  position: unset;
  background-color: red;
  overflow-x: hidden;
  display: flex;
`;

哪种方法更好？有没有更好的选择？

Answer 1

这只是我的看法:
我不认为我们可以做任何与你所做的完全不同的事情。
我认为的另一种方法是创建一个选项对象来映射变体的可能性，如下所示:

const variantOptions = {
  header: {
    backgroundColor: theme.colors.lightblue,
    color: theme.colors.white,
    active: theme.colors.blue,
  },
  white: {
    backgroundColor: "white",
    color: theme.colors.lightblue,
    active: theme.colors.blue,
  },
};

并在您的样式组件中使用它，如下所示:

const ButtonStyle = styled.button`
  padding: 8px 20px;
  border: none;
  outline: none;
  font-weight: ${(props) => props.theme.font.headerFontWeight};
  font-size: ${(props) => props.theme.font.headerFontSize};
  display: block;
  &:hover {
    cursor: pointer;
  }

  ${({ variant }) =>
    variant &&
    variantOptions[variant] &&
    css`
       background-color: ${variantOptions[variant].backgroundColor};
       color: ${variantOptions[variant].color};
       &:active {
          color: ${variantOptions[variant].active};
       }
   `}
`;

所有这些按钮都可以使用:

<ButtonStyle variant="*wrong*">Button</ButtonStyle>
<ButtonStyle variant="header">Button</ButtonStyle>
<ButtonStyle variant="white">Button</ButtonStyle>
<ButtonStyle>Button</ButtonStyle>