From 32bb8d84dddb4606e0aa3451c0b2771be8ca97bd Mon Sep 17 00:00:00 2001
From: Hikaru Kobayashi <hikaru.kobayashi0719@gmail.com>
Date: Tue, 29 Oct 2024 22:22:39 +0900
Subject: [PATCH] add useCssModule example (#3070) docs: add useCssModule
 example

---
 src/api/sfc-css-features.md | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/api/sfc-css-features.md b/src/api/sfc-css-features.md
index 40232eb3e..3832d2ce6 100644
--- a/src/api/sfc-css-features.md
+++ b/src/api/sfc-css-features.md
@@ -153,6 +153,26 @@ useCssModule()
 useCssModule('classes')
 ```
 
+- **例**
+
+```vue
+<script setup lang="ts">
+import { useCssModule } from 'vue'
+
+const classes = useCssModule()
+</script>
+
+<template>
+  <p :class="classes.red">red</p>
+</template>
+
+<style module>
+.red {
+  color: red;
+}
+</style>
+```
+
 ## CSS の `v-bind()` {#v-bind-in-css}
 
 SFC の `<style>` タグでは `v-bind` という CSS 関数を使用して、CSS の値をコンポーネントの動的な状態にリンクすることをサポートします: