无法设置 Blazor 组件的样式答案

【问题标题】：Can't Style Blazor Components无法设置 Blazor 组件的样式
【发布时间】：2020-06-20 15:57:47
【问题描述】：

我根本不知道如何设置 Blazor 组件的样式，我开始了一个项目，它附带了一些已经完成的东西，比如计数器页面、导航栏和类似的东西。 wwwroot文件夹App.css中有一个文件，那里写了很多样式但是当删除代码时，没有任何反应，页面仍然很漂亮，当我插入一些代码时，没有任何反应，所以我如何设置样式这个页面？我应该将我的 css 文件放在哪里以便设置它们的样式？

【问题讨论】：

您是否尝试重建解决方案（ctrl + shift + b）然后刷新网页？

标签： c# css blazor

【解决方案1】：

也许 CSS 正在被缓存。

包含在“index.html”文件中。了解大部分样式实际上来自 bootstrap.min.css 文件。

您可以尝试将引用更改为

<link href="css/app.css?v=1" rel="stylesheet" />

看看这有什么不同。

【讨论】：

问题确实是缓存，出于某种原因，即使我使用 CTRL + F5 重新加载应用程序，缓存仍然存在。我觉得好傻哈哈。非常感谢！
@Lukys - 您还必须在编辑之间保存该 .css 文件。确保它在磁盘上。

【解决方案2】：

为了应用样式，您需要将资源加载到相应的页面，如下所示：

<StyleSheet Resource="folder/MyStyles.css" Assembly="GetType().Assembly"></StyleSheet>

可以在文档中找到有关此的更多信息： https://docs.microsoft.com/en-us/mobile-blazor-bindings/ui/css-styles

【讨论】：

至少这是我会尝试的解决方案。从未使用过西装外套，但文档中提到了这一点
没用 :( 它给了我一条消息“发现带有意外名称 'StyleSheet' 的标记元素。如果这是一个组件，请为其命名空间添加一个 @using 指令。”并且如果我输入@，则会显示其他错误。我的 *** 真痛苦。
嗯，这很奇怪。您使用的是 Blazor 服务器还是新的 Blazor 客户端？ @Lukys

【解决方案3】：

对于您的 CSS，请确保它在您的 _Host.cshtml 文件中

<link href="css/site.css" rel="stylesheet" />

如果您在 wwwroot/CSS/site.css 下有一个 CSS 文件（这是新 blazor 项目的默认设置），则此行有效。

如果您有不同的 CSS 文件，可以将其从解决方案资源管理器拖到 _Host.cshtml 文件中，Visual Studio 会为您添加链接。

这不是你需要知道的，但你也可以像这样在 Nuget 包中引用 CSS：

<link href="~/_content/DataJuggler.Blazor.Components/css/circle.css" rel="stylesheet" />

我经常使用 BlazorStyled，因为您可以动态更改 CSS 值：

我有一个使用 BlazorStyled Nuget 包的开源项目。

如果您想要一个工作示例，代码在这里：

https://github.com/DataJuggler/BlazorChat

使用 BlazorStyled 的示例

<Styled @bind-Classname="@BubbleStyle">
    background-image: url('@ImageUrl');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    left: 0%;
    top: 0vh;
    width: 84%;
    height: auto;
    margin-bottom: 1.2vh;
</Styled>

在上面的例子中，@BubbleStyle 只是我组件上的一个字符串属性。

每个聊天消息的@ImageUrl 属性都会发生变化，我会在其中显示以下气泡之一：

网站也上线了，但还没有多少人注册：

https://blazorchat.com

【讨论】：