Как форматировать классы с динамически более чистым способом для динамического стиля многоразового? ⇐ CSS

[Anonymous]

Я делаю этот многоразовый значок, используя Tailwind CSS, где цвет значка должен меняться в зависимости от статуса. Результат очень нечистый, и я ищу способ оптимизировать это.bg-${color}-100 и то же самое для других классов. Очевидно, это не работает, потому что Tailwind ожидает, что вы передадите полное имя класса, подобное этому BG-Green-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 {status};
}

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;


Подробнее здесь: https://stackoverflow.com/questions/751 ... ynamically