如何以更清晰的方式格式化顺风类以动态地重复使用 styles？

Question

我正在使用 Tailwind CSS 制作这个可重复使用的徽章，其中徽章的颜色应该根据状态而改变。 结果非常不干净，我正在寻找一种优化方法。

我尝试使用字符串文字来尝试使 styles 更清洁，如下所示；

bg-${color}-100和其他类名一样。 显然这不起作用，因为顺风希望您传递完整的 class 名称，例如bg-green-100 。 这意味着我必须有条件地检查每种颜色，因为这种color === "green"? "bg-green-100": "bg-red-100" color === "green"? "bg-green-100": "bg-red-100"如果您要检查很多颜色道具，这会迫使您编写这么多类。

这就是整个组件的样子

import ctl from "@netlify/classnames-template-literals";
interface BadgeProps {
  color: string;
  status: string | boolean;
}

function Badge({ color, status }: BadgeProps) {
  return <span className={badgeStyle(color)}>{status}</span>;
}


const badgeStyle = (color: string) =>
  ctl(
   `
    ${
      color === "green"
        ? `bg-green-100 text-green-800  ${containerStyle} dark:bg-green-900 dark:text-green-300`
        : color === "red"
        ? `bg-red-100 text-red-800  ${containerStyle} dark:bg-red-900 dark:text-red-300`
        : color === "yellow"
        ? `bg-yellow-100 text-yellow-800  ${containerStyle} dark:bg-yellow-900 dark:text-yellow-300`
        : color === "blue"
        ? "bg-blue-100 text-blue-800  ${containerStyle} dark:bg-blue-900 dark:text-blue-300"
        : color === "indigo"
        ? `bg-indigo-100 text-indigo-800  ${containerStyle} dark:bg-indigo-900 dark:text-indigo-300`
        : color === "purple"
        ? `bg-purple-100 text-purple-800  ${containerStyle} dark:bg-purple-900 dark:text-purple-300`
        : color === "pink"
        ? `bg-pink-100 text-pink-800  ${containerStyle} dark:bg-pink-900 dark:text-pink-300`
        : color === "orange"
        ? `bg-orange-100 text-orange-800  ${containerStyle} dark:bg-orange-900 dark:text-orange-300`
        : color === "gray"
        ? `bg-gray-100 text-gray-800  ${containerStyle} dark:bg-gray-900 dark:text-gray-300`
        : color === "gray"
        ? `bg-gray-100 text-gray-800  ${containerStyle} dark:bg-gray-900 dark:text-gray-300`
        : ""
    }
   
    `
  );

const containerStyle = ctl(`
 font-medium mr-2 px-2.5 py-0.5 rounded  text-sm text-sm
  `);

export default Badge;

Answer 1

唯一的选择是根据文档将这些三元语句重新格式化为字典。 来源

function Button({ color, children }) {
  const colorVariants = {
    blue: 'bg-blue-600 hover:bg-blue-500',
    red: 'bg-red-600 hover:bg-red-500',
  }

  return (
    <button className={`${colorVariants[color]} ...`}>
      {children}
    </button>
  )
}

Answer 2

您可以创建一个单独的文件，将不同的颜色道具映射到相应的Tailwind classes 。

创建名为colorClasses.js的文件，该文件导出一个 object，其中不同的color props as keys ，相应的Tailwind classes as values 。

colorClasses.js

export default {
  green: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300',
  red: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300',
  yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300',
  blue: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
  indigo: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300',
  purple: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300',
  pink: 'bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300',
  orange: 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300',
  gray: 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300'
}

然后在您的组件文件中，您可以导入colorClasses object 并使用它根据color属性动态设置class names 。

import colorClasses from './colorClasses';

const Badge = ({ color }) => {
  const containerStyle = 'font-medium mr-2 px-2.5 py-0.5 rounded text-sm';
  const colorClass = colorClasses[color];
  return (
    <div className={`${colorClass} ${containerStyle}`}>
      {/* Your content here */}
    </div>
  );
};