Blazor PWA组件样式与css

Question

我在处理.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;
}

嗯，我做了研究，但到目前为止没有运气。我是不是搞错了？

提前谢谢。

Answer 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内核3.1。如果你检查项目中的css文件，你可以看到下面的代码和普通的HTML元素一样进行了样式设置。

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

这让我很困惑。任何关于这个话题的信息都非常感谢。