update docs

yoli799480165 · yoli799480165 · commit 818243bcf8e6 · 2025-05-08T11:16:42.000+08:00
diff --git a/README.md b/README.md
@@ -13,7 +13,7 @@ dotnet add package CssInCSharp
 ```
 
 ## Usage
-- Used in native style tag
+- Used within a native `<style>` tag.
 ```csharp
 <div class="basic">
     <div class="title">Title</div>
@@ -58,7 +58,7 @@ dotnet add package CssInCSharp
 }
 ```
 
-- Use StyleContent Or Style Component
+- Use the `StyleContent` and `Style` components on the page.
 ```csharp
 <div class="div1">
     Style In Head
@@ -106,7 +106,41 @@ dotnet add package CssInCSharp
 }
 ```
 
-- Register style
+- Use StyleHelper to inject styles in custom components.
+```csharp
+<div class="@_token.HashId @Name">
+    @foreach (var item in Items)
+    {
+        <div class="item">@item</div>
+    }
+</div>
+
+@code {
+    [Parameter] 
+    public string[] Items { get; set; }
+
+    [Parameter]
+    public int Width { get; set; } = 500;
+
+    protected override void OnInitialized()
+    {
+        // use style helper to register style
+        StyleHelper.Register(new StyleInfo
+        {
+            HashId = _token.HashId,
+            Path = new string[]{ "component", "demo" },
+            StyleFn = UseStyle
+        });
+    }
+
+    private CSSInterpolation UseStyle()
+    {
+        ...
+    }
+}
+```
+
+- Inject a `CSSObject` or `CSSString` into the head.
 ```csharp
 @_node
 
@@ -116,19 +150,6 @@ dotnet add package CssInCSharp
 
     protected override void OnInitialized()
     {
-        var token = new
-        {
-            ColorBgLayout = "#ddd",
-            BorderRadiusLG = "8px",
-            BoxShadow = "5px #DEDEDE",
-            Padding = 20,
-            BorderRadius = 4,
-            ColorTextTertiary = "#000",
-            ColorBgContainer = "#EFEFEF",
-            MotionEaseInBack = "",
-            ColorTextSecondary = "",
-            BoxShadowSecondary = ""
-        };
         var styles = new
         {
             container = new CSSObject
@@ -163,15 +184,15 @@ dotnet add package CssInCSharp
                 }
             """"),
         };
-
+        // The CX and CSS methods are defined in the StyleHelper class.
+        // @using static CssInCSharp.StyleHelper
         _node = @<div class="@CX("a-simple-create-style-demo-classname", styles.container)">
                     <div class="@styles.card">createStyles Demo</div>
                     <div>Current theme mode: dark</div>
                 </div>;
     }
 }
 ```
-
 For other examples, you can check out the example code. For more information, please refer to the [document](./docs/index.md).
 
 ## Css Compiler
diff --git a/docs/index.md b/docs/index.md
@@ -667,7 +667,7 @@ The style output:
 ```
 
 ## Custom Component Style
-On a page, you can use the `<StyleContent>` component to add styles, but you can't use StyleContent in custom component, so if you need to add a style to the head in the custom component, you need to use the `Register` method in the `StyleHelper` class to register the style.
+On a page, you can use the `<StyleContent>` component to add page-specific styles. However, StyleContent cannot be used inside custom components. For example, if you create a `<DemoComponent>` component, how can you inject its styles into the `<head>` tag? CssInCsharp provides a global helper class called `StyleHelper`. You can use the `Register` method to inject styles into the `<head>` tag.
 
 DemoComponent.razor
 ```csharp
