Vue3でpropsの値をCSSに渡す際に注意したいこと
はじめに
久々に実装した際に、エラーも出力されず苦戦したので共有します。
サンプルコード
Sample.vue
<template>
<span class="test" :style="styles">
テスト
</span>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue';
export default defineComponent({
props: {
color: { type: String, default: '#FFF' },
},
setup: (props) => {
const styles = computed(() => ({
'--color': props.color,
}));
return { styles };
},
});
</script>
<style scoped>
.test {
color: var(--icon-color);
}
</style>
ここで大事なのが、propsを渡すクラスをつけている要素のstyleフィールドに対して、stylesをbindしている箇所です。
Sample.vue
<span class="test" :style="styles">
これを忘れてしまうと、CSS内のvar変数に値が入らないので注意してください。
所感
自分の記憶や過去の自分のコードを信じるではなく、おかしいなと思ったら公式サイトをすぐに見に行ったほうが良いですね。
参考文献
Author And Source
この問題について(Vue3でpropsの値をCSSに渡す際に注意したいこと), 我々は、より多くの情報をここで見つけました https://qiita.com/miyazaki_radish/items/7cd6b3f6f367177127df著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .