Vue3とTailwindCSSを使って、コンポーネントとして、ボタンのカラーを動的に指定したいです。
以下の記事を参考に、付与するクラス名の一部にdataを用いる方法で試しました。
CSSとしては渡ってきたカラー名が入っているのですが、うまく表示に反映されないです。
<HomeButton color="blue" />
<HomeButton color="pink" />
<HomeButton color="teal" />
<HomeButton color="amber" />
<button
class="bg-transparent hover:bg-amber-500 text-amber-700 font-semibold hover:text-white py-2 px-4 border border-amber-500 hover:border-transparent rounded"
>
Button
<template>
<button
:class="`hover:bg-${color}-500 text-${color}-700 border-${color}-500 `"
class="w-full bg-transparent font-semibold hover:text-white py-2 px-4 border hover:border-transparent rounded"
>
Button
</button>
</template>
<script setup>
const props = defineProps({
color: String,
});
console.log(props.color);
</script>
そもそもこういった使い方自体、アウトなのでしょうか?
親側で各ボタンに対して、異なるスタイルを渡したいのですが、、
なかなか良い方法が見つかりません。
良い方法があれば、教えていただきたいです!