Merge pull request #36 from GuoXiCheng/dev-c

update docs

src/.vitepress/sidebar.yaml

@@ -51,17 +51,6 @@
             link: /frontend/react/component-interaction/two-way-binding
           - text: 状态提升
             link: /frontend/react/component-interaction/lifting-state-up
-      - text: styles
-        collapsed: true
-        items:
-          - text: Stylesheets
-            link: /frontend/react/styles/stylesheets
-          - text: CSS Modules
-            link: /frontend/react/styles/css-modules
-          - text: Styled Components
-            link: /frontend/react/styles/styled-components
-          - text: Tailwind CSS
-            link: /frontend/react/styles/tailwind-css
       - text: ref
         collapsed: true
         items:
@@ -109,6 +98,18 @@
         items:
           - text: JSX 语法
             link: /frontend/react/core-concepts/jsx
+          - text: styles
+            items:
+              - text: 内联样式
+                link: /frontend/react/core-concepts/styles/inline-style
+              - text: 外部样式
+                link: /frontend/react/core-concepts/styles/external-style
+              - text: CSS Modules
+                link: /frontend/react/core-concepts/styles/css-modules
+              - text: Styled Components
+                link: /frontend/react/core-concepts/styles/styled-components
+              - text: Tailwind CSS
+                link: /frontend/react/core-concepts/styles/tailwind-css
 /backend:
   - text: NodeJS
     link: /backend/nodejs/index

src/frontend/react/core-concepts/styles/css-modules.md

@@ -0,0 +1,15 @@
+# CSS Modules
+
+## 什么是 CSS Modules
+
+CSS Modules 是一种 CSS 文件的模块化解决方案。它的主要思想是将 CSS 文件作为一个模块，通过模块化的方式来管理 CSS 文件，避免全局污染，同时还能够实现 CSS 文件的复用。
+
+## 基本用法
+
+只需将 CSS 文件的后缀名改为 `.module.css` 即可使用 CSS Modules。
+
+::: code-group
+<<< @/../projects/react-sandbox/src/pages/styles-demo/CSSModuleDemo.module.css
+
+<<< @/../projects/react-sandbox/src/pages/styles-demo/CSSModuleDemo.tsx
+:::

src/frontend/react/core-concepts/styles/external-style.md

@@ -0,0 +1,23 @@
+# 外部样式
+
+## 什么是外部样式
+
+外部样式是一种将样式从 HTML 文档中分离出来的方法。这种方法的优势在于可以将样式应用到多个页面上，而不必重复编写样式。
+
+## 基本用法
+
+设置外部样式。
+
+<<< @/../projects/react-sandbox/src/pages/styles-demo/ExternalStyle.css
+
+使用`className`属性设置类名。
+
+<<< @/../projects/react-sandbox/src/pages/styles-demo/ExternalStyleA.tsx
+
+使用三元表达式设置动态样式。
+
+<<< @/../projects/react-sandbox/src/pages/styles-demo/ExternalStyleB.tsx
+
+使用模版字符串。
+
+<<< @/../projects/react-sandbox/src/pages/styles-demo/ExternalStyleC.tsx

src/frontend/react/core-concepts/styles/inline-style.md

@@ -0,0 +1,15 @@
+# 内联样式
+
+## 什么是内联样式
+
+内联样式是一种将 CSS 样式直接写在 JSX 元素上的方式。在 React 中，可以使用内联样式来设置元素的样式。
+
+## 基本用法
+
+使用`style`属性设置样式，样式的属性名使用驼峰命名法。
+
+<<< @/../projects/react-sandbox/src/pages/styles-demo/InlineStyleA.tsx
+
+直接在标签中定义样式，这里第一层`{}`表示JSX的表达式，第二层`{}`表示对象。
+
+<<< @/../projects/react-sandbox/src/pages/styles-demo/InlineStyleB.tsx

src/frontend/react/core-concepts/styles/styled-components.md

@@ -0,0 +1,35 @@
+# Styled Components
+
+## 什么是 Styled Components
+
+Styled Components 是一个 CSS-in-JS 库，它可以使用 JavaScript 来编写 CSS 样式。
+
+Styled Components 通过创建 React 组件的方式来定义样式，这样可以在组件内部定义样式，而不是在全局定义样式。
+
+## 安装
+
+```bash
+npm install styled-components
+```
+
+## 基本用法
+
+### 创建 Styled Components
+
+<<< @/../projects/react-sandbox/src/pages/styles-demo/StyledBasic.tsx
+
+### 条件渲染
+
+<<< @/../projects/react-sandbox/src/pages/styles-demo/StyledCondition.tsx
+
+### 扩展样式
+
+<<< @/../projects/react-sandbox/src/pages/styles-demo/StyledExtend.tsx
+
+### 使用伪类
+
+<<< @/../projects/react-sandbox/src/pages/styles-demo/StyledPseudo.tsx
+
+## 参考
+
+- [Styled Components 官方文档](https://styled-components.com/)

src/frontend/react/styles/tailwind-css.md → src/frontend/react/core-concepts/styles/tailwind-css.md

@@ -1,9 +1,9 @@
-# Tailwind CSS
-
-## 什么是 Tailwind CSS
-
-Tailwind CSS 是一个实用的工具类库，它提供了一组预定义的 CSS 类，可以用于快速构建现代的 Web 界面。
-
-## 参考
-
+# Tailwind CSS
+
+## 什么是 Tailwind CSS
+
+Tailwind CSS 是一个实用的工具类库，它提供了一组预定义的 CSS 类，可以用于快速构建现代的 Web 界面。
+
+## 参考
+
 - [Tailwind CSS 官方文档](https://tailwindcss.com/docs/installation)