cascading parameter

BlazorApp/BlazorApp/Pages/Counter.razor

@@ -2,7 +2,7 @@
 
 <PageTitle>Counter</PageTitle>
 
-<h1>Counter</h1>
+<h1 style="color:@this.Color">Counter</h1>
 
 <p role="status">Current count: @currentCount</p>
 
@@ -10,6 +10,9 @@
 <button class="btn btn-secondary" @onclick="AutoIncrement">Auto Increment</button>
 
 @code {
+    [CascadingParameter(Name = "ThemeColor")]
+    public string Color { get; set; }
+
     private int currentCount = 0;
 
     private void IncrementCount()

BlazorApp/BlazorApp/Pages/ShowUser.razor

@@ -6,17 +6,23 @@
 
 <br />
 
+<Counter></Counter>
+
 <ul class="list-group">
     @foreach (UserData user in this.Users)
     {
         <li @key="user" class="list-group-item">
             <button class="btn btn-link" type="button" @onclick="(() => KickUser(user))">[Kick]</button>
-            <label>@user.Name</label>
+            <label style="color:@this.Color">@user.Name</label>
         </li>
     }
 </ul>
 
 @code {
+    [CascadingParameter(Name = "ThemeColor")]
+    public string Color { get; set; }
+
+
     [Parameter]
     public List<UserData> Users { get; set; }
 

BlazorApp/BlazorApp/Pages/User.razor

@@ -4,7 +4,20 @@
 
 <h3>Online Users</h3>
 
-<ShowUser @ref="_showUser" Users="_users" Callback="CallbackAction"/>
+<label>Theme color:</label>
+<select class="form-control" @bind="_selectedColor">
+    @foreach (var option in _options)
+    {
+        <option value="@option">
+            @option
+        </option>
+    }
+</select>
+
+<CascadingValue Name="ThemeColor" Value="_selectedColor">
+    <ShowUser @ref="_showUser" Users="_users" Callback="CallbackAction" />
+    <ShowUser @ref="_showUser" Users="_users" Callback="CallbackAction" />
+</CascadingValue>
 
 <br />
 
@@ -22,6 +35,9 @@
 </div>
 
 @code {
+    private string _selectedColor = "Green";
+    private List<string> _options = new List<string>() { "Green", "Red", "Blue" };
+
     private List<UserData> _users = new List<UserData>();
     private ShowUser _showUser;