refactor StyleOutlet component

README.md

@@ -13,6 +13,7 @@ dotnet add package CssInCSharp
 ```
 
 ## Usage
+- Used within a native `<style>` tag.
 ```csharp
 <div class="basic">
     <div class="title">Title</div>
@@ -57,7 +58,142 @@ dotnet add package CssInCSharp
 }
 ```
 
-For other examples, you can check out the example code.
+- Use the `StyleContent` and `Style` components on the page.
+```csharp
+<div class="div1">
+    Style In Head
+</div>
+
+<div class="div2">
+    Style In Body
+</div>
+
+<!-- style in head -->
+<StyleContent>
+    <Style StyleFn="@StyleInHead" Path="Basic|StyleTag"></Style>
+</StyleContent>
+
+<!--style in body-->
+<Style StyleFn="@StyleInBody"></Style>
+
+@code {
+    private CSSInterpolation StyleInHead()
+    {
+        return new CSSObject
+        {
+            [".div1"] = new CSSObject
+            {
+                Width = "200px",
+                Height = "200px",
+                Border = "1px solid #DDD",
+            }
+        };
+    }
+
+    private CSSInterpolation StyleInBody()
+    {
+        return new CSSObject
+        {
+            [".div2"] = new CSSObject
+            {
+                Width = "200px",
+                Height = "200px",
+                Border = "1px solid #DDD",
+                BackgroundColor = "#EFEFEF",
+            }
+        };
+    }
+}
+```
+
+- 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
+
+@code {
+
+    private RenderFragment _node;
+
+    protected override void OnInitialized()
+    {
+        var styles = new
+        {
+            container = new CSSObject
+            {
+                BackgroundColor = token.ColorBgLayout,
+                BorderRadius = token.BorderRadiusLG,
+                MaxWidth = 400,
+                Width = "100%",
+                Height = 180,
+                Display = "flex",
+                AlignItems = "center",
+                JustifyContent = "center",
+                FlexDirection = "column",
+                MarginLeft = "auto",
+                MarginRight = "auto",
+            },
+
+            card = CSS($$""""
+                box-shadow: {{token.BoxShadow}};
+                padding: {{token.Padding}}px;
+                border-radius: {{token.BorderRadius}}px;
+                color: {{token.ColorTextTertiary}};
+                background: {{token.ColorBgContainer}};
+                transition: all 100ms {{token.MotionEaseInBack}};
+
+                margin-bottom: 8px;
+                cursor: pointer;
+
+                &:hover {
+                  color: {{token.ColorTextSecondary}};
+                  box-shadow: {{token.BoxShadowSecondary}};
+                }
+            """"),
+        };
+        // 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
 The CssInCSharp is similar to less or sass. You can simply convert you style file into C# class, so that you can make full use of the C# language features to generate style content.

docs/index.md

@@ -667,21 +667,19 @@ 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 `UseStyleRegister` 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
 <div class="@_tokenHash demo"></div>
-@_styleContent
 
 @code
 {
-    private RenderFragment _styleContent;
     private string _tokenHash = "css-zcfrx9";
 
     protected override void OnInitialized()
     {
-        _styleContent = StyleHelper.UseStyleRegister(new StyleInfo
+        StyleHelper.Register(new StyleInfo
         {
             HashId = _tokenHash,
             Path = new[] { "component", "demo" },
@@ -702,4 +700,70 @@ DemoComponent.razor
         };
     }
 }
-```
+```
+The `StyleHelper` class contains a set of methods for registering styles. `CSSObject` or `CSSString` can be injected directly.
+```csharp
+@_node
+
+@code {
+
+    private RenderFragment _node;
+
+    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
+            {
+                BackgroundColor = token.ColorBgLayout,
+                BorderRadius = token.BorderRadiusLG,
+                MaxWidth = 400,
+                Width = "100%",
+                Height = 180,
+                Display = "flex",
+                AlignItems = "center",
+                JustifyContent = "center",
+                FlexDirection = "column",
+                MarginLeft = "auto",
+                MarginRight = "auto",
+            },
+
+            card = CSS($$""""
+                box-shadow: {{token.BoxShadow}};
+                padding: {{token.Padding}}px;
+                border-radius: {{token.BorderRadius}}px;
+                color: {{token.ColorTextTertiary}};
+                background: {{token.ColorBgContainer}};
+                transition: all 100ms {{token.MotionEaseInBack}};
+
+                margin-bottom: 8px;
+                cursor: pointer;
+
+                &:hover {
+                  color: {{token.ColorTextSecondary}};
+                  box-shadow: {{token.BoxShadowSecondary}};
+                }
+            """"),
+        };
+
+        _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>;
+    }
+}
+```
+When injecting CSSObject via the `CX` method, you can keep the custom className, otherwise the `HashId` will be used as the default className, and the `CSS` method can inject a style string, which can contain structured style content.

docs/index.zh-CN.md

@@ -700,21 +700,19 @@ Style组件属性列表:
 ```
 
 ## 自定义组件样式
-在页面上，你可以使用`<StyleContent>`组件来添加页面样式。但是StyleContent并不能用在自定义的组件里。例如创建一个`<DemoComponent>`组件，该如何为这个自定义组件添加样式。CssInCsharp提供一个全局的Helper类`StyleHelper`。你可以使用`UseStyleRegister`方法来向head标签里注入样式。
+在页面上，你可以使用`<StyleContent>`组件来添加页面样式。但是StyleContent并不能用在自定义的组件里。例如创建一个`<DemoComponent>`组件，该如何为这个自定义组件添加样式。CssInCsharp提供一个全局的Helper类`StyleHelper`。你可以使用`Register`方法来向head标签里注入样式。
 
 DemoComponent.razor演示代码：
 ```csharp
 <div class="@_tokenHash demo"></div>
-@_styleContent
 
 @code
 {
-    private RenderFragment _styleContent;
     private string _tokenHash = "css-zcfrx9";
 
     protected override void OnInitialized()
     {
-        _styleContent = StyleHelper.UseStyleRegister(new StyleInfo
+        StyleHelper.Register(new StyleInfo
         {
             HashId = _tokenHash,
             Path = new[] { "component", "demo" },
@@ -736,4 +734,69 @@ DemoComponent.razor演示代码：
     }
 }
 ```
-`UseStyleRegister`方法调用后会返回RenderFragment对象。你需要将该对象放到组件里。
+`StyleHelper`类中包含一组用于注册样式的方法。可直接注入`CSSObject`对象或样式字符串。
+```csharp
+@_node
+
+@code {
+
+    private RenderFragment _node;
+
+    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
+            {
+                BackgroundColor = token.ColorBgLayout,
+                BorderRadius = token.BorderRadiusLG,
+                MaxWidth = 400,
+                Width = "100%",
+                Height = 180,
+                Display = "flex",
+                AlignItems = "center",
+                JustifyContent = "center",
+                FlexDirection = "column",
+                MarginLeft = "auto",
+                MarginRight = "auto",
+            },
+
+            card = CSS($$""""
+                box-shadow: {{token.BoxShadow}};
+                padding: {{token.Padding}}px;
+                border-radius: {{token.BorderRadius}}px;
+                color: {{token.ColorTextTertiary}};
+                background: {{token.ColorBgContainer}};
+                transition: all 100ms {{token.MotionEaseInBack}};
+
+                margin-bottom: 8px;
+                cursor: pointer;
+
+                &:hover {
+                  color: {{token.ColorTextSecondary}};
+                  box-shadow: {{token.BoxShadowSecondary}};
+                }
+            """"),
+        };
+
+        _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>;
+    }
+}
+```
+通过`CX`方法注入CSSObject时可以保留自定义className，否则会以HashId作为该对象的className，`CSS`方法可以直接注入样式字符串，该字符串可以包含结构化的样式内容。