如何在不修改组件的情况下将 CSS 宽度应用于 Razor 组件中的嵌套 Div？

Question

我正在使用生成嵌套

<div>

结构的 Razor 组件，并且我需要将

width: 100%;

样式应用于外部

<div>

。但是，我无法直接修改组件，并且它不会公开任何

style

或

class

属性。

这是组件生成的 HTML 结构：

<div class="pr-6 pl-3 py-4 ">
    <div class="flex space-x-4">
        <!-- Other content here -->
    </div>
</div>

所做的尝试：

• 我尝试在 xy.razor.css 文件中添加一个新的 CSS 类，但我不能 找到要应用样式的 div。

• 我尝试使用以下选择器但没有成功：

  ::深div.pr-6.pl-3.py-4 { 宽度：100%； }

  .pr-6.pl-3.py-4 { 宽度：100%； }

问题：

• 有没有办法使用 CSS 将

  width: 100%;

  应用于此 div Razor 组件的上下文？
• 是否有针对嵌套 div 的特定策略 样式不能直接修改吗？

附加信息：

• 在这种情况下使用 JavaScript 修改 DOM 并不是一个可行的解决方案。

Answer 1

您应该能够将其添加到页面，从中调用组件：

<style>
    .pr-6.pl-3.py-4 {
        width: 100%!important;
    } 
</style>

但这将适用于页面上带有

<div>

的所有

class="pr-6 pl-3 py-4"

标签。如果您有多个这些组件，并且它只适用于一个，您可能需要创建一个临时组件，以隔离您需要的组件。