docs(nest-css): add docs for Component Selector

Author: akinoccc

packages/docs/guide/advances/nest-css.md

@@ -4,6 +4,8 @@ outline: deep
 
 # Nest CSS
 
+## Basic Usage
+
 In Vue Styled Components, you can write CSS in the same way as `less` or `sass`. `@vue-styled-components/core` is based on `stylis` compiling CSS to basic css, so you needn't worry about the compatibility.
 
 For example, you can write CSS like this:
@@ -32,4 +34,45 @@ const StyledDiv = styled.div`
 // .styled-xxx:hover:active {
 //     background-color: #fff;
 // }
-```
+```
+
+## Use `Component` as Selector
+
+You can use `StyledComponent` as selector. For example:
+
+:::demo
+```vue
+<script setup lang="ts">
+import styled, { ThemeProvider } from '@vue-styled-components/core'
+import { reactive } from 'vue'
+
+const Container = styled.div`
+  display: inline-block;
+  padding: 4px 12px;
+`
+
+const Button = styled.button`
+  padding: 8px 24px;
+  border-radius: 24px;
+  color: white;
+  background: black;
+`
+
+const NewContainer = styled(Container)`
+  ${Button} {
+    color: black;
+    background: gray;
+  }
+`
+</script>
+
+<template>
+<Container>
+  <Button>Button</Button>
+</Container>
+<NewContainer>
+  <Button>Button</Button>
+</NewContainer>
+</template>
+```
+:::

packages/docs/guide/advances/theming.md

@@ -100,9 +100,9 @@ const changeTheme = () => {
 ```
 :::
 
-## Functional Theme
+## Function Theme
 
-You may need to use functional themes, instead of object themes. For example, you may need to reverse colors, or change the color based on other conditions.
+You may need to use function themes, instead of object themes. For example, you may need to reverse colors, or change the color based on other conditions.
 
 :::demo
 ```vue

packages/docs/zh/guide/advances/nest-css.md

@@ -4,6 +4,8 @@ outline: deep
 
 # 嵌套 CSS
 
+## 基础用法
+
 你可以像 `less`, `sass` 一样使用嵌套 CSS。 `@vue-styled-components/core` 并非使用最新的CSS规范([nest css](https://drafts.csswg.org/css-nesting/#nesting))来实现，而是使用了 `stylis` 编译为最基础的 CSS，因此你不需要担心其兼容性问题。
 
 如下：
@@ -35,4 +37,46 @@ const StyledDiv = styled.div`
 // .styled-xxx:hover:active {
 //     background-color: #fff;
 // }
-```
+```
+
+
+## 使用组件作为选择器
+
+你可以使用 `StyledComponent` 作为选择器，会自动转换为类选择器。例如：
+
+:::demo
+```vue
+<script setup lang="ts">
+import styled, { ThemeProvider } from '@vue-styled-components/core'
+import { reactive } from 'vue'
+
+const Container = styled.div`
+  display: inline-block;
+  padding: 4px 12px;
+`
+
+const Button = styled.button`
+  padding: 8px 24px;
+  border-radius: 24px;
+  color: white;
+  background: black;
+`
+
+const NewContainer = styled(Container)`
+  ${Button} {
+    color: black;
+    background: gray;
+  }
+`
+</script>
+
+<template>
+<Container>
+  <Button>Button</Button>
+</Container>
+<NewContainer>
+  <Button>Button</Button>
+</NewContainer>
+</template>
+```
+:::