是否可以为多个组件创建 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

我找到了一个解决方法，使用自定义范围标识符格式。
\n这不是很优雅，但你可以考虑一下：

\n

\n

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

  \n

  ComponentA.razor\n  \xe2\x86\xb3 ComponentA.razor.css\n\nComponentB.razor \n  \xe2\x86\xb3 ComponentB.razor.css\n

  \n
\n

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

  \n
\n

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

  \n

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

  \n
\n

\n

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

\n