c# - 是否可以在不复制的情况下为多个组件创建一个 Blazor 范围的 CSS 文件？

Question

是否可以在不复制的情况下为多个组件创建某种组件范围的 CSS 文件？有什么命名约定吗？

让我们假设有三个组件都使用相同的标签，但样式应该只应用于命名方案 ComponentA 的组件。其他组件不应受到影响。

ComponentA_A.razor
ComponentA_B.razor
ComponentOther.razor

有

ComponentA.razor.css

代替

ComponentA_A.razor.css
ComponentA_B.razor.css

如果复制是唯一的方法，是否可以在 css 文件本身中使用某种引用或在 blazor 组件中引用特定的 css 文件？

Answer 1

我找到了一个解决方法，使用 custom scope identifier format .
它不是很优雅，但你可以考虑它:

• 所有 .razor 组件都需要有各自的 .razor.css 文件:

  ComponentA.razor
    ↳ ComponentA.razor.css
  
  ComponentB.razor 
    ↳ ComponentB.razor.css
  

• .razor.css 文件中的一个包含 css 样式，其他文件可以留空。

• 在您的 .csproj 文件中添加以下项目组:

  <ItemGroup>
      <None Update="Components\ComponentA.razor.css" CssScope="my-custom-scope" />
      <None Update="Components\ComponentB.razor.css" CssScope="my-custom-scope" />
  </ItemGroup>
  

这将为应用它的所有组件创建相同的自定义范围 my-custom-scope，因此将对它们应用相同的样式。