Css 使用样式化组件创建变体的方法

使用样式化组件创建变体的最佳方法是什么？以下是我目前正在做的事情

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

常量变量={
标题：{
背景颜色：theme.colors.lightblue，
颜色：theme.colors.white，
活动：theme.colors.blue，
},
白色：{
背景颜色：“白色”，
颜色：theme.colors.lightblue，
活动：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};
       }
   `}
`;

所有这些按钮都可以工作：

按钮
按钮
按钮
按钮

在处理样式化组件变体时，我喜欢这样做，以保持事情的组织性和可伸缩性

如果变量存储在同一文件中，我将使用继承属性：

const DefaultButton=styled.button`
颜色：${（props）=>props.theme.primary}；
`;
const ButtonFlashy=已设置样式（默认按钮）`
颜色：紫红色；
`;
const ButtonDisabled=样式化（DefaultButton）`
颜色：${（道具）=>props.theme.grey}；
`;

如果我们谈论的是可重用组件，我会使用以下技术：

从“样式化组件”导入样式化；
//请注意，拥有一个默认类很重要
const StyledCTA=（{className='default'，children}）=>{
返回{children}；
};
/*
*默认按钮样式
*/
const Wrapper=styled.button`
颜色：#000；
`;
/*
*自定义按钮变体1
*/
export const StyledCTAFushia=styled（StyledCTA）`
&& {
颜色：紫红色；
}
`;
/*
*自定义按钮变型2
*/
export const StyledCTADisabled=styled（StyledCTA）`
&& {
颜色：${（道具）=>props.theme.colors.grey.light}；
}
`;
导出默认样式DCTA；

用法：

从'components/StyledCTA'导入StyledCTA，{StyledCTADisabled，StyledCTAFushia}；
常量页=（）=>{
返回(
默认CTA
禁用CTA
品红CTA
)
};

---

在我就这一主题撰写的博客文章中了解更多信息。

受先前解决方案的启发，我想与大家分享我的想法：

import styled, { css, DefaultTheme } from 'styled-components';

const variantStyles = (theme: DefaultTheme, variant = 'primary') =>
  ({
    primary: css`
      color: ${theme.colors.light};
      background: ${theme.colors.primary};
      border: 1px solid ${theme.colors.primary};
    `,
  }[variant]);

const Button = styled.button<{ variant: string }>`
  padding: 1rem;
  font-size: 0.875rem;
  transition: all 0.3s;
  cursor: pointer;

  ${({ theme, variant }) => variantStyles(theme, variant)}

  &:active {
    transform: translateY(1.5px);
  }
`;

export default Button;

---

太棒了，我喜欢这个解决方案

import { Button } from './HeroSection.styles';

<Button variant="primary">Start Learning</Button>