diff --git a/src/BootstrapBlazor.Server/Components/Samples/TreeViews.razor b/src/BootstrapBlazor.Server/Components/Samples/TreeViews.razor
index 48ad96e45f9..b4123bd28f8 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/TreeViews.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/TreeViews.razor
@@ -6,8 +6,8 @@
 <h4>@Localizer["TreeViewsDescription"]</h4>
 
 <Tips class="mt-3">
-    <div><code>Tree</code> @((MarkupString)Localizer["TreeViewsTips1"].Value) <code>TItem="TreeFoo"</code></div>
-    <ul class="ul-demo mt-3">
+    <div class="mb-3"><code>Tree</code> @((MarkupString)Localizer["TreeViewsTips1"].Value) <code>TItem="TreeFoo"</code></div>
+    <ul class="ul-demo mb-0">
         <li>@((MarkupString)Localizer["TreeViewsTips2"].Value)</li>
         <li>@((MarkupString)Localizer["TreeViewsTips3"].Value)</li>
         <li>@((MarkupString)Localizer["TreeViewsTips4"].Value)</li>
@@ -26,7 +26,7 @@
 <DemoBlock Title="@Localizer["TreeViewNormalTitle"]"
            Introduction="@Localizer["TreeViewNormalIntro"]"
            Name="Normal">
-    <p class="mb-3">@((MarkupString)Localizer["TreeViewNormalDescription"].Value)</p>
+    <section ignore class="mb-3">@((MarkupString)Localizer["TreeViewNormalDescription"].Value)</section>
     <TreeView TItem="TreeFoo" Items="@Items" OnTreeItemClick="@OnTreeItemClick" />
     <ConsoleLogger @ref="Logger1" class="mt-3" />
 </DemoBlock>
@@ -34,11 +34,11 @@
 <DemoBlock Title="@Localizer["TreeViewCheckboxTitle"]"
            Introduction="@Localizer["TreeViewCheckboxIntro"]"
            Name="Checkbox">
-    <p class="mb-3">
+    <section ignore class="mb-3">
         <div>@((MarkupString)Localizer["TreeViewCheckboxTips1"].Value)</div>
         <div>@((MarkupString)Localizer["TreeViewCheckboxTips2"].Value)</div>
-    </p>
-    <div class="row form-inline">
+    </section>
+    <section ignore class="row form-inline">
         <div class="col-12 col-lg-auto">
             <RadioList IsButton="true" @bind-Value="@IsReset" Items="@ResetItems" Color="Color.Success" ShowLabel="true" DisplayText="@Localizer["TreeViewNormalRadioListDisplayText"]"></RadioList>
         </div>
@@ -49,7 +49,7 @@
         <div class="col-12 col-lg-auto">
             <Button Text="@Localizer["TreeViewCheckboxButtonText"]" OnClick="OnRefresh" />
         </div>
-    </div>
+    </section>
     <TreeView TItem="TreeFoo" Items="@CheckedItems" ShowCheckbox="true" OnTreeItemChecked="@OnTreeItemChecked" IsReset="@IsReset" AutoCheckChildren="@AutoCheckChildren" AutoCheckParent="@AutoCheckParent" />
     <ConsoleLogger @ref="Logger2" class="mt-3" />
 </DemoBlock>
@@ -57,48 +57,48 @@
 <DemoBlock Title="@Localizer["TreeViewTreeDisableTitle"]"
            Introduction="@Localizer["TreeViewTreeDisableIntro"]"
            Name="TreeDisable">
-    <p class="mb-3">@((MarkupString)Localizer["TreeViewTreeDisableDescription"].Value)</p>
+    <section ignore class="mb-3">@((MarkupString)Localizer["TreeViewTreeDisableDescription"].Value)</section>
     <TreeView TItem="TreeFoo" Items="@DisabledItems" ShowCheckbox="true" />
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TreeViewAccordionModelTitle"]"
            Introduction="@Localizer["TreeViewAccordionModelIntro"]"
            Name="AccordionModel">
-    <p class="mb-3">@((MarkupString)Localizer["TreeViewAccordionModelDescription"].Value)</p>
+    <section ignore class="mb-3">@((MarkupString)Localizer["TreeViewAccordionModelDescription"].Value)</section>
     <TreeView TItem="TreeFoo" Items="@GetAccordionItems()" OnExpandNodeAsync="OnExpandNodeAsync" ShowCheckbox="true" IsAccordion="true" />
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TreeViewDefaultExpandTitle"]"
            Introduction="@Localizer["TreeViewDefaultExpandIntro"]"
            Name="DefaultExpand">
-    <p class="mb-3">
+    <section ignore class="mb-3">
         @((MarkupString)Localizer["TreeViewDefaultExpandDescription"].Value)
-    </p>
+    </section>
     <TreeView TItem="TreeFoo" Items="@ExpandItems" ShowCheckbox="true" />
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TreeViewTreeDisplayIconTitle"]"
            Introduction="@Localizer["TreeViewTreeDisplayIconIntro"]"
            Name="TreeDisplayIcon">
-    <p class="mb-3">
+    <section ignore class="mb-3">
         @((MarkupString)Localizer["TreeViewTreeDisplayIconDescription"].Value)
-    </p>
+    </section>
     <TreeView TItem="TreeFoo" Items="@GetIconItems()" ShowIcon="true" ShowCheckbox="true" />
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TreeViewTreeClickExpandTitle"]"
            Introduction="@Localizer["TreeViewTreeClickExpandIntro"]"
            Name="TreeClickExpand">
-    <p class="mb-3">
+    <section ignore class="mb-3">
         @((MarkupString)Localizer["TreeViewTreeClickExpandDescription"].Value)
-    </p>
+    </section>
     <TreeView TItem="TreeFoo" Items="@GetClickExpandItems" ShowIcon="true" ShowCheckbox="true" ClickToggleNode="true" />
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TreeViewTreeValidationFormTitle"]"
            Introduction="@Localizer["TreeViewTreeValidationFormIntro"]"
            Name="TreeValidationForm">
-    <p class="mb-3">@((MarkupString)Localizer["TreeViewTreeValidationFormDescription"].Value)</p>
+    <section ignore class="mb-3">@((MarkupString)Localizer["TreeViewTreeValidationFormDescription"].Value)</section>
     <ValidateForm Model="@Model">
         <TreeView TItem="TreeFoo" Items="@GetFormItems" OnTreeItemClick="@OnFormTreeItemClick" ShowCheckbox="true" />
     </ValidateForm>
@@ -107,9 +107,9 @@
 <DemoBlock Title="@Localizer["TreeViewTreeLazyLoadingTitle"]"
            Introduction="@Localizer["TreeViewTreeLazyLoadingIntro"]"
            Name="TreeLazyLoading">
-    <p class="mb-3">
+    <section ignore class="mb-3">
         @((MarkupString)Localizer["TreeViewTreeLazyLoadingDescription"].Value)
-    </p>
+    </section>
     <TreeView TItem="TreeFoo" ClickToggleNode="true" Items="@GetLazyItems()" OnExpandNodeAsync="OnExpandNodeAsync" />
 </DemoBlock>
 
@@ -141,4 +141,4 @@
 
 <AttributeTable Items="@GetAttributes()" />
 
-<AttributeTable Items="@GetTreeItemAttributes()" Title="@Localizer["TreeViewsAttrs"]" />
+<AttributeTable Items="@GetTreeItemAttributes()" Title="@Localizer["TreeViewsAttribute"]" />
diff --git a/src/BootstrapBlazor.Server/Locales/en.json b/src/BootstrapBlazor.Server/Locales/en.json
index 23aa1385063..9556f6c7e5a 100644
--- a/src/BootstrapBlazor.Server/Locales/en.json
+++ b/src/BootstrapBlazor.Server/Locales/en.json
@@ -658,7 +658,7 @@
     "TreeViewShowSkeletonTitle": "Loading skeleton screen",
     "TreeViewShowSkeletonIntro": "By setting <code>ShowSkeleton</code>, the component displays the skeleton screen when the data is loaded asynchronously",
     "TreeViewShowSkeletonButtonText": "Asynchronous loading",
-    "TreeViewsAttrs": "TreeItem property"
+    "TreeViewsAttribute": "TreeItem property"
   },
   "BootstrapBlazor.Server.Components.Samples.Trees": {
     "TreeIntro": "<p>Obsolete，The <a href=\"treeviews\" alt=\"treeview\">TreeView</a> provides more functions",
diff --git a/src/BootstrapBlazor.Server/Locales/zh.json b/src/BootstrapBlazor.Server/Locales/zh.json
index 2e94632b090..17cbf4580ba 100644
--- a/src/BootstrapBlazor.Server/Locales/zh.json
+++ b/src/BootstrapBlazor.Server/Locales/zh.json
@@ -658,7 +658,7 @@
     "TreeViewShowSkeletonTitle": "加载骨架屏",
     "TreeViewShowSkeletonIntro": "通过设置 <code>ShowSkeleton</code> 使异步加载数据时组件显示骨架屏",
     "TreeViewShowSkeletonButtonText": "异步加载",
-    "TreeViewsAttrs": "TreeItem 属性"
+    "TreeViewsAttribute": "TreeItem 属性"
   },
   "BootstrapBlazor.Server.Components.Samples.Trees": {
     "TreeIntro": "<p>本组件已弃用，请使用新组件 <a href=\"treeviews\" alt=\"treeview\">TreeView</a> 提供更多功能",
diff --git a/src/BootstrapBlazor/Components/TreeView/TreeView.razor.scss b/src/BootstrapBlazor/Components/TreeView/TreeView.razor.scss
index 882b1097c0e..0d1d5a0d809 100644
--- a/src/BootstrapBlazor/Components/TreeView/TreeView.razor.scss
+++ b/src/BootstrapBlazor/Components/TreeView/TreeView.razor.scss
@@ -1,16 +1,16 @@
-.tree-view {
+.tree-view {
+    --bb-tree-padding: #{$bb-tree-padding};
+    --bb-tree-margin: #{$bb-tree-margin};
+    --bb-tree-ul-padding-left: #{$bb-tree-ul-padding-left};
+    --bb-tree-item-margin: #{$bb-tree-item-margin};
+    --bb-tree-icon-width: #{$bb-tree-icon-width};
+    --bb-tree-check-margin: #{$bb-tree-check-margin};
+    --bb-tree-node-padding: #{$bb-tree-node-padding};
+    --bb-tree-item-active-color: #{$bb-tree-item-active-color};
+    --bb-tree-item-active-bg: #{$bb-tree-item-active-bg};
+    --bb-tree-item-hover-bg: #{$bb-tree-item-hover-bg};
+    --bb-tree-icon-margin-right: #{$bb-tree-icon-margin-right};
     position: relative;
-    --bb-tree-padding: 0;
-    --bb-tree-margin: 0;
-    --bb-tree-ul-padding-left: 20px;
-    --bb-tree-item-margin: 1px 0;
-    --bb-tree-icon-width: 22px;
-    --bb-tree-check-margin: 0 4px;
-    --bb-tree-node-padding: .25rem .5rem;
-    --bb-tree-item-active-color: #409eff;
-    --bb-tree-item-active-bg: #e9ecef;
-    --bb-tree-item-hover-bg: var(--bs-secondary);
-    --bb-tree-icon-margin-right: .5rem;
 }
 
     .tree-view .tree-root {
diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss
index cfdabc79f3b..03a976005dc 100644
--- a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss
+++ b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss
@@ -610,4 +610,17 @@ $bb-transfer-panel-item-width: 160px;
 $bb-transfer-buttons-padding: 0 30px;
 $bb-transfer-filter-focus-border-color: #409eff;
 
+// TreeView
+$bb-tree-padding: 0;
+$bb-tree-margin: 0;
+$bb-tree-ul-padding-left: 20px;
+$bb-tree-item-margin: 1px 0;
+$bb-tree-icon-width: 22px;
+$bb-tree-check-margin: 0 4px;
+$bb-tree-node-padding: .25rem .5rem;
+$bb-tree-item-active-color: #409eff;
+$bb-tree-item-active-bg: #e9ecef;
+$bb-tree-item-hover-bg: var(--bs-secondary);
+$bb-tree-icon-margin-right: .5rem;
+
 @import "../components.scss";