如何以更清晰的方式格式化順風類以動態地重復使用 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>
  );
};