Пользовательский CSS для MudBlazor
Почему CSS не работает в MudBlazor?
Когда я создаю приложение MudBlazor для рендеринга на стороне сервера с нуля, используя шаблон проекта Visual Studio MudBlazor, и добавляю несколько пользовательских стилей CSS, которые они не будут применять.
Единственный способ заставить работать пользовательские CSS — добавить их в атрибут style.
Есть ли способ заставить это работать? Потому что это уже предел, если вы хотите добавить более сложный CSS с анимацией...
КОД
Приложение.razor
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<base href = "/" />
<link href = "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel = "stylesheet" />
<link href = "_content/MudBlazor/MudBlazor.min.css" rel = "stylesheet" />
<link rel = "stylesheet" href = "MudBlazorCssTest.styles.css" />
<HeadOutlet @rendermode = "@InteractiveServer" />
</head>
<body>
<Routes @rendermode = "@InteractiveServer" />
<script src = "_framework/blazor.web.js"></script>
<script src = "_content/MudBlazor/MudBlazor.min.js"></script>
</body>
</html>
wwwroot/app.css
.test ::deep {
background-color: red !important;
}
Главная.бритва
@page "/"
<div class = "test">
<div>This is not red</div>
</div>
<div style = "background-color: red">
<div>This is red</div>
</div>
Ответы 1
Так должно быть ::deep .test ? И я вижу предупреждение в тесте:
Итак, если вы хотите использовать CSS глобально, вы можете создать «App.razor.css»
::deep .test {
background-color: red !important;
}
Чтобы ::deep работал, вы можете обернуть элемент с «class» тестом, используя другой «<div>».
<div >
<div class = "test">
<div>This is not red</div>
</div>
</div>
Результат теста
Только что выяснил, что !important не требуется для его работы, а также не обязательно оборачивать div в другой div. Можно просто поставить класс прямо на "Это не красное" - div
В этом вся суть... Хорошо, кажется, теперь я понял: каждому компоненту нужен свой собственный
xyz.razor.css(думаю, это из-за объема?!?). С помощью::deepон наследует CSS дочерним компонентам. Итак, посколькуApp.razorявляется корневым родителем, каждый::deepявляется глобальным.