Blazor PWA 组件样式与 css

如何解决Blazor PWA 组件样式与 css

我在使用 .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;
}

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

先谢谢你。

解决方法

好吧，我找到了解决方案。

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;
}

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