使用 css 设计 Blazor PWA 组件样式答案

【问题标题】：Blazor PWA Components Styling with css使用 css 设计 Blazor PWA 组件样式
【发布时间】：2021-04-08 11:49:01
【问题描述】：

我在使用 .net5 blazor PWA 项目时遇到了这个问题。

我有两个 css 文件。一个由 blazor 项目 app.css 创建，另一个 css 文件是一个 css 隔离文件。我不知道这是否是特定的 css 隔离问题，但问题是我无法使用隔离的 css 文件设置 blazor html 元素的样式，例如editform、inputtext ...

在我的 css 文件中，我有以下 css 行：

editform {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0rem 5rem;
    overflow: hidden;
}
.text-area inputtext {
    background: none;
    outline: none;
    border: none;
}

嗯，我进行了研究，但到目前为止还没有运气。我在这里做错了吗？

先谢谢你了。

【问题讨论】：

来自 Ms 文档：默认情况下，CSS 隔离仅适用于您与格式 {COMPONENT NAME}.razor.css 关联的组件，其中占位符 {COMPONENT NAME} 通常是组件名称。要将更改应用到子组件，请将 ::deep 组合符用于父组件的 .razor.css 文件 docs.microsoft.com/en-us/aspnet/core/blazor/components/… 中的任何后代元素
感谢您的回复，虽然我写了答案，但没有看到您的评论。这也是我发现的。感谢您的宝贵时间。

标签： css blazor progressive-web-apps isolation

【解决方案1】：

嗯，我找到了解决办法。

Blazor 自定义元素（组件是我不知道的正确术语）呈现到其相关的 HTML 元素。例如，<EditForm> 渲染为 <form> 元素。

所以，为了访问渲染的元素，我们需要 ::deep 。

我的问题中editform的css样式变为：

form, ::deep from{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0rem 5rem;
overflow: hidden;
}

.text-area ::deep input {
background: none;
outline: none;
border: none;
}

如果在该深层元素中有一个类，我使用以下代码：

::deep .customClass

这个解决方案对我有用，但我想知道是否有其他方式来设置 blazor 自定义元素的样式。因为 blazor 使用了这个组件<app></app>.net core 3.1。如果您检查项目中的 css 文件，您可以看到样式与下面的代码一样，就像普通的 HTML 元素一样。

app {
    position: relative;
    display: flex;
    flex-direction: column;
}

这让我很困惑。非常感谢有关此主题的任何信息。

【讨论】：