无法设置Blazor组件的样式

Question

我根本不知道如何设置Blazor组件的样式，我启动了一个项目，该项目已经完成了一些工作，例如计数器页面，导航栏和类似的东西。 df <- data.frame( stringsAsFactors = FALSE, word = c("dog", "short", "bird", "cat", "short", "man") ) nounName <- c('dog', 'cat', 'bird') adjName <- c('quick', 'brown', 'short') noun <- rep('noun', length(nounName)) adj <- rep('adjective', length(adjName)) names(noun) <- nounName names(adj) <- adjName partsofspeech <- c(noun, adj) df$word_categories <- partsofspeech[df$word] 文件夹wwwroot中有一个文件，那里写了很多样式，但是当删除代码时，什么也没发生，页面继续漂亮，当我插入一些代码时，什么也没发生，所以我如何为该页面设置样式？我应该在哪里放置CSS文件以设置样式？

Print

Answer 1

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

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

有关此问题的更多信息，请参见文档： https://docs.microsoft.com/en-us/mobile-blazor-bindings/ui/css-styles

Answer 2

也许正在缓存CSS。

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

您可以尝试将引用更改为

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

看看那有什么区别。

Answer 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