Blazor 组件 CSS 样式的共享与隔离

src/HelloShop.AppHost/DaprComponents/redis-lock.yaml

@@ -7,9 +7,8 @@ spec:
   version: v1
   metadata:
   - name: redisHost
-    secretKeyRef:
-       name: ConnectionStrings__cache
+    value: "localhost:6379"
   - name: redisPassword
-    value: ""
+    value: "guest"
 auth:
   secretStore: env-secretstore

src/HelloShop.AppHost/Program.cs

@@ -13,7 +13,8 @@ var identitydb = postgres.AddDatabase("identitydb");
 var productdb = postgres.AddDatabase("productdb");
 var orderingdb = postgres.AddDatabase("orderingdb");
 
-var cache = builder.AddRedis("cache", port: 6380).WithLifetime(ContainerLifetime.Persistent).WithPersistence();
+var redisPassword = builder.AddParameter("redisPassword", secret: true);
+var cache = builder.AddRedis("cache", port: 6379, password: redisPassword).WithLifetime(ContainerLifetime.Persistent).WithPersistence();
 
 var rabbitmqUser = builder.AddParameter("rabbitmqUser", secret: true);
 var rabbitmqPassword = builder.AddParameter("rabbitmqPassword", secret: true);

src/HelloShop.AppHost/appsettings.json

@@ -10,6 +10,7 @@
     "postgreUser": "postgres",
     "postgrePassword": "postgres",
     "rabbitmqUser": "guest",
-    "rabbitmqPassword": "guest"
+    "rabbitmqPassword": "guest",
+    "redisPassword": "guest"
   }
 }

src/HelloShop.AppShared/Components/Demo/CountComponent.razor

@@ -0,0 +1,19 @@
+<h1>@Title</h1>
+
+<p role="status" class="counter-value">Current count: @InitCount</p>
+
+<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
+
+@code {
+
+    [Parameter]
+    public string? Title { get; set; }
+
+    [Parameter]
+    public int InitCount { get; set; }
+
+    private void IncrementCount()
+    {
+        InitCount++;
+    }
+}

src/HelloShop.AppShared/Components/Demo/CountComponent.razor.css

@@ -0,0 +1,3 @@
+h1 {
+    color:dodgerblue;
+}

src/HelloShop.AppShared/Components/Pages/Counter.razor

@@ -1,19 +1,7 @@
 @page "/counter"
 @rendermode InteractiveAuto
+@using HelloShop.AppShared.Components.Demo
 
 <PageTitle>Counter</PageTitle>
 
-<h1>Counter</h1>
-
-<p role="status">Current count: @currentCount</p>
-
-<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
-
-@code {
-    private int currentCount = 0;
-
-    private void IncrementCount()
-    {
-        currentCount++;
-    }
-}
+<CountComponent InitCount="1" Title="Counter" />

src/HelloShop.AppShared/wwwroot/app.css

@@ -57,4 +57,8 @@ h1:focus {
 
 .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
     text-align: start;
+}
+
+.counter-value {
+    color:orangered;
 }

src/HelloShop.HybridApp/Components/Pages/Component1.razor

@@ -1,3 +1,3 @@
 @page "/component1"
 
-<h3>Component1</h3>
+<h1>Component1</h1>

src/HelloShop.HybridApp/wwwroot/index.html

@@ -6,7 +6,7 @@
     <title>HelloShop.HybridApp</title>
     <base href="/" />
     <link rel="stylesheet" href="_content/HelloShop.AppShared/lib/bootstrap/dist/css/bootstrap.min.css" />
-    <link rel="stylesheet" href="_content/HelloShop.AppShared/lib/app.css" />
+    <link rel="stylesheet" href="_content/HelloShop.AppShared/app.css" />
     <link rel="stylesheet" href="HelloShop.HybridApp.styles.css" />
     <link rel="icon" href="data:,">
 </head>

src/HelloShop.WebApp/HelloShop.WebApp.Client/Components/Pages/Component2.razor

@@ -1,4 +1,7 @@
 @page "/component2"
 @rendermode InteractiveAuto
+@using HelloShop.AppShared.Components.Demo
 
-<h3>Component2</h3>
+<h3>Component2</h3>
+
+<CountComponent InitCount="30" Title="Counter1" />

src/HelloShop.WebApp/HelloShop.WebApp/Components/Pages/Component1.razor

@@ -1,4 +1,15 @@
 @page "/component1"
 @rendermode InteractiveServer
 
-<h3>Component1</h3>
+@using HelloShop.AppShared.Components.Demo
+
+<h1>Component1</h1>
+
+<div class="border my-3 p-3">
+    <CountComponent Title="Counter1" InitCount="1"></CountComponent>
+</div>
+
+<div class="border my-3 p-3">
+    <CountComponent Title="Counter2" InitCount="2"></CountComponent>
+</div>
+

src/HelloShop.WebApp/HelloShop.WebApp/Components/Pages/Component1.razor.css

@@ -0,0 +1,4 @@
+::deep .counter-value {
+    font-size: 2rem;
+    font-weight: bold;
+}

src/HelloShop.WebApp/HelloShop.WebApp/Properties/launchSettings.json

@@ -6,7 +6,7 @@
         "dotnetRunMessages": true,
         "launchBrowser": true,
         "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
-        "applicationUrl": "http://localhost:5224",
+        "applicationUrl": "http://localhost:8080",
         "environmentVariables": {
           "ASPNETCORE_ENVIRONMENT": "Development"
         }
@@ -16,7 +16,7 @@
         "dotnetRunMessages": true,
         "launchBrowser": true,
         "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
-        "applicationUrl": "https://localhost:7169;http://localhost:5224",
+        "applicationUrl": "https://localhost:8181;http://localhost:8080",
         "environmentVariables": {
           "ASPNETCORE_ENVIRONMENT": "Development"
         }