如何在 Blazor Web Assembly 中更改 Radzen 原色？

Question

我正在使用 Radzen 和 Bootstrap 5 开发 Blazor 项目。但是我不想要它附带的默认颜色。

我想更改 Radzen 原色，以便我的应用程序具有不同的颜色主题。

所以我将其添加到我的

app.css

：

:root {
  --rz-primary: #3e5b87;
}

我还更改了

app.css

和样式表的加载顺序，将其放在最后。

如何更改此原色？

Answer 1

我也有同样的问题。更新 _Host.cshtml 中样式表的顺序，使 site.css 出现在 Radzen 主题 CSS 之后来修复它：

_Host.cshtml 示例：

    @page "/"
    @using Microsoft.AspNetCore.Components.Web
    @namespace StoreStocktake.Pages
    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <base href="~/" />
        <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
        <link rel="icon" type="image/png" href="favicon.png"/>
        <link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css">
        <link href="css/site.css" rel="stylesheet" />
        <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
    </head>

site.css 示例：

:root {
    --rz-text-font-family: Arial;
    --rz-text-title-color: #333746;
    --rz-text-color: #333746;
    --rz-text-secondary-color: #394652;
    --rz-text-disabled-color: #DEDEE0;
    --rz-body-background-color: #ffffff;
    --rz-grid-border: 1px solid  #333746;
    --rz-grid-stripe-background-color: #DEDEE0;
    --rz-grid-cell-color: #333746;
    --rz-grid-hover-color: #394652;
    --rz-grid-selected-background-color: #394652;
    --rz-grid-hover-background-color: #394652;
    --rz-grid-column-resizer-helper-background-color: #333746;
    --rz-grid-header-background-color: #DEDEE0;
    --rz-grid-filter-focus-color: #394652;
    --rz-grid-apply-filter-button-background-color: #394652;
    --rz-grid-foot-background-color: #ffffff;
    --rz-grid-header-filter-icon-active-color: #00B2A9;
    --rz-primary: #333746;
    --rz-secondary: #394652;
    --rz-success: #00B2A9;
    --rz-info: #DEDEE0;
    --rz-warning: #FFB500;
    --rz-danger: #ED0089;
}

Answer 2

我也有类似的问题。 “基于材质”的 CSS 未加载。将其更改为“材料”，事情就应该可以了。我可以毫无问题地更改根变量。

Answer 3

我知道这个问题比较旧，但为了获得准确的答案，从 .NET 8 开始，Blazor Web App 模板中的文件结构发生了变化。没有更多的 .cshtml 文件。

_Layout.cshtml 和 _Host.cshtml 消失了，App.razor 的结构也发生了变化。
您现在拥有更新的 App.razor 文件和 Routes.razor 文件。
与此同时，site.css 现在是 app.css

话虽如此，为了解决OP提出的原始问题，您还需要移动：

<link rel="stylesheet" href="iLine.Contabilidade.styles.css" />

与 app.css 一起位于 Radzen css 文件下方。 app.css 和 styles.css 行的顺序并不重要，只要它们都位于 material-base.css 下面即可。

App.razor

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">
    <link rel="stylesheet" href="iLine.Contabilidade.styles.css" />
    <link rel="stylesheet" href="app.css" />
</head>

如何在 Blazor Web Assembly 中更改 Radzen 原色？

问题描述投票：0回答：3

3个回答

最新问题

如何在 Blazor Web Assembly 中更改 Radzen 原色？

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3