docs(theme): add desc for useTheme

vue-styled-components · Sep 20, 2024 · 122e854 · 122e854
1 parent f82e67f
commit 122e854
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 15 deletions.
diff --git a/packages/docs/guide/advances/theming.md b/packages/docs/guide/advances/theming.md
@@ -130,6 +130,12 @@ const Link = defineComponent(() => {
 
 :::
 
+## Getting Theme by Hook
+
+Yet you can also get theme by using `useTheme` hook, but it must be used within a `ThemeProvider`.
+
+The usage see [useTheme](/guide/api/hook)
+
 ## How to Get Theme Hints with TypeScript
 
 When using styled components, you might reference your theme context like `${props => props.theme.primary}`. To enable TypeScript to provide autocomplete hints and type checking for your theme properties, you can extend the `DefaultTheme` interface.

diff --git a/packages/docs/guide/api/hook.md b/packages/docs/guide/api/hook.md
@@ -4,22 +4,22 @@ outline: deep
 
 # Hook
 
-## useStyledClassName <div style="display: inline-flex; align-items: center;"><Badge type="info" text="deprecated at v1.3.0.beta.1" /></div>
+## `useTheme`
 
 **Return**
 
-- `getStyledClassName`, `styledComponentInstance => string`
-- `styledClassNameMap`, `Record<string, string>`, `{[componentName]: className}`
+- `DefaultTheme`
 
 **Usage**
 
 ```vue
 <script setup lang="ts">
-  import { styled, useStyledClassName } from '@vue-styled-components/core'
+  import styled, { useTheme } from '@vue-styled-components/core'
+  
+  const theme = useTheme()
 
   const StyledDiv = styled.div`
-    background: #ccc;
+    background: ${ theme.bg };
   `
-  console.log(useStyledClassName(StyledDiv)) // styled-xxx(unique id)
 </script>
 ```
diff --git a/packages/docs/zh/guide/advances/theming.md b/packages/docs/zh/guide/advances/theming.md
@@ -123,6 +123,12 @@ const Link = defineComponent(() => {
 
 :::
 
+## 通过 Hook 获取主题
+
+你还可以通过 `useTheme` 获取主题，但前提是必须属于 `ThemeProvider` 的组件树内。
+
+使用方法参考 [useTheme](/zh/guide/api/hook)
+
 ## 如何通过 TypeScript 获取主题提示？
 
 在使用 styled 组件时，你可能会通过 `${props => props.theme.primary}` 引用你的主题上下文。为了让 TypeScript 能够提供自动补全提示并进行类型检查，你可以扩展 `DefaultTheme` 接口。

diff --git a/packages/docs/zh/guide/api/hook.md b/packages/docs/zh/guide/api/hook.md
@@ -4,23 +4,22 @@ outline: deep
 
 # Hook
 
-## useStyledClassName  <div style="display: inline-flex; align-items: center;"><Badge type="info" text="deprecated at v1.3.0.beta.1" /></div>
+## `useTheme`
 
-**返回**
+**Return**
 
-- `getStyledClassName`, `styledComponentInstance => string`
-- `styledClassNameMap`, `Record<string, string>`, `{[componentName]: className}`
+- `DefaultTheme`
 
-**用法**
+**使用**
 
 ```vue
 <script setup lang="ts">
-  import { styled, useStyledClassName } from '@vue-styled-components/core'
+  import styled, { useTheme } from '@vue-styled-components/core'
+  
+  const theme = useTheme()
 
   const StyledDiv = styled.div`
-    background: #ccc;
+    background: ${ theme.bg };
   `
-  const { getStyledClassName } = useStyledClassName()
-  console.log(getStyledClassName(StyledDiv)) // styled-xxx(unique id)
 </script>
 ```