Apply styling to child elements properly

using "::deep" https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation
danielchalmers · Nov 26, 2023 · 6d91b5d · 6d91b5d
1 parent bc667ab
commit 6d91b5d
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 15 deletions.
diff --git a/JournalApp/Components/Pages/ManageCategoriesDialog.razor.css b/JournalApp/Components/Pages/ManageCategoriesDialog.razor.css
@@ -11,8 +11,7 @@
 	overflow-x: clip;
 }
 
-/* Moved to app.css because it doesn't apply in here for some reason.
-	.category-view-edit-button > .mud-button {
-		justify-content: start !important;
-		flex-grow: 1 !important;
-	}*/
+::deep .category-view-edit-button > .mud-button {
+	justify-content: start !important;
+	flex-grow: 1 !important;
+}
diff --git a/JournalApp/Components/Pages/SafetyPlanning/SafetyPlanDialog.razor.css b/JournalApp/Components/Pages/SafetyPlanning/SafetyPlanDialog.razor.css
@@ -3,3 +3,6 @@
 	flex-direction: column;
 	gap: 1em;
 }
+
+::deep safety-plan-item {
+}
diff --git a/JournalApp/Components/Pages/SafetyPlanning/SafetyPlanItem.razor b/JournalApp/Components/Pages/SafetyPlanning/SafetyPlanItem.razor
@@ -1,6 +1,6 @@
 @namespace JournalApp
 
-<div>
+<div class="safety-plan-item">
 	<MudText Typo="Typo.h5">@Title</MudText>
 	<MudText Typo="Typo.caption">@Subtitle</MudText>
 	<MudTextField T="string" @bind-Text="Text" Placeholder="@Placeholder" Variant="Variant.Outlined" DisableUnderLine AutoGrow Lines="3" MaxLines="10" />

diff --git a/JournalApp/Components/Pages/Trends/TrendsDialog.razor.css b/JournalApp/Components/Pages/Trends/TrendsDialog.razor.css
@@ -1,10 +1,10 @@
-.trends-container {
+::deep .trends-container {
 	display: flex;
 	flex-direction: column;
 	gap: 1em;
 }
 
-.trend-view {
+::deep .trend-view {
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;

diff --git a/JournalApp/Components/Pages/Worksheets/WorksheetsDialog.razor.css b/JournalApp/Components/Pages/Worksheets/WorksheetsDialog.razor.css
@@ -27,7 +27,7 @@
 	align-items: start;
 }
 
-.worksheet-view {
+::deep .worksheet-view {
 	display: flex;
 	flex-direction: column;
 	align-items: start;

diff --git a/JournalApp/wwwroot/app.css b/JournalApp/wwwroot/app.css
@@ -43,12 +43,6 @@ button {
 	width: 0;
 }
 
-/* Should be in ManageCategoriesDialog.razor.css */
-.category-view-edit-button > .mud-button {
-	justify-content: start !important;
-	flex-grow: 1 !important;
-}
-
 .page-header {
 	display: flex;
 	flex-direction: row;