0

Vue3とTailwindCSSを使って、コンポーネントとして、ボタンのカラーを動的に指定したいです。

以下の記事を参考に、付与するクラス名の一部にdataを用いる方法で試しました。

【JS】Vueの:classの書き方3通り

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>

実際の画面

そもそもこういった使い方自体、アウトなのでしょうか?

親側で各ボタンに対して、異なるスタイルを渡したいのですが、、
なかなか良い方法が見つかりません。

良い方法があれば、教えていただきたいです!

1
  • カラー名を文字列としてを渡すのではなく、渡す変数(ここでいう、blueやpink)にtailwindのclassの文字列("hover:bg-blue-500 text-blue-700 border-blue-500")を格納してpropsとして渡すことで、うまく表示に反映されるようになりました。
    – RIORIO
    2022年7月24日 5:10

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。