search

Megabit / Blazorise

Blazorise is a component library built on top of Blazor with support for CSS frameworks like Bootstrap, Tailwind, Bulma, AntDesign, and Material.
https://blazorise.com/
Other
3.28k stars 530 forks source link

Theme is not applied for Primary buttons in Modal #2913

Closed TorbjornEliasson closed 3 years ago

TorbjornEliasson commented 3 years ago

When a theme is set with new primary and secondary colors the colors is not applied for buttons that is not Outline.

@inject IStringLocalizer<App> Loc
<Blazorise.ThemeProvider Theme="@Theme">
    <StateProvider>
        <CascadingAuthenticationState>
            <Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
                <Found Context="routeData">
                    <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                        <NotAuthorized>
                            <RedirectToLogin />
                        </NotAuthorized>
                        <Authorizing>
                            <p>@Loc["AuthenticationInProgress"]</p>
                        </Authorizing>
                    </AuthorizeRouteView>
                </Found>
                <NotFound>
                    <LayoutView Layout="@typeof(MainLayout)">
                        <p>@Loc["PageDoesNotExist"]</p>
                    </LayoutView>
                </NotFound>
            </Router>
        </CascadingAuthenticationState>
    </StateProvider>
</Blazorise.ThemeProvider>

See the result in attached screen. Skärmbild 2021-09-14 102302

App.razor

@inject IStringLocalizer<App> Loc
<Blazorise.ThemeProvider Theme="@Theme">
    <StateProvider>
        <CascadingAuthenticationState>
            <Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
                <Found Context="routeData">
                    <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                        <NotAuthorized>
                            <RedirectToLogin />
                        </NotAuthorized>
                        <Authorizing>
                            <p>@Loc["AuthenticationInProgress"]</p>
                        </Authorizing>
                    </AuthorizeRouteView>
                </Found>
                <NotFound>
                    <LayoutView Layout="@typeof(MainLayout)">
                        <p>@Loc["PageDoesNotExist"]</p>
                    </LayoutView>
                </NotFound>
            </Router>
        </CascadingAuthenticationState>
    </StateProvider>
</Blazorise.ThemeProvider>

App.razor.cs

TorbjornEliasson commented 3 years ago

Version 0.9.4.4

stsrki commented 3 years ago

How do you apply the theme colors?

It works in the demo app https://materialdemo.blazorise.com/tests/buttons

image

TorbjornEliasson commented 3 years ago

Ah, sorry. The test code was lost. Here it is:

@page "/test"
<Button Clicked="Show">Show modal</Button>
<Modal @ref="ModalAddAction" ScrollToTop="false">
    <ModalContent Size="ModalSize.Large" Centered="false" Padding="Blazorise.Padding.Is1">
        <ModalBody>
            <Button Color="Color.Secondary" Outline>Secondary outline = OK</Button>
            <Button Color="Color.Primary" Outline>Primary outline = OK</Button>
            <Button Color="Color.Secondary">Secondary = wrong color</Button>
            <Button Color="Color.Primary">Primary = wrong color</Button>
        </ModalBody>
    </ModalContent>
</Modal>

@code {
    private Modal ModalAddAction;
    private void Show()
    {
        ModalAddAction.Show();
    }
}

And here is App.razor.cs:

using Blazorise;

namespace Blazor
{
    public partial class App
    {
        private readonly Theme Theme = new()
        {
            BarOptions = new()
            {
                VerticalSmallWidth = "46px",
                VerticalBrandHeight = "56px",
                HorizontalHeight = "56px"
            },
            ColorOptions = new()
            {
                Primary = "#ff7d3c",
                Secondary = "#1e4d72",
                Success = "#2dbf33",
                Info = "#9BD8FE",
                Warning = "#ef5350",
                Danger = "#d50000",
                Light = "#F0F0F0",
                Dark = "#535353",
            },
            InputOptions = new()
            {
                CheckColor = "#69c6b0",
                SliderColor = "#fafafa",
            },
            BreakpointOptions = new() { },
            BackgroundOptions = new() { },
            TextColorOptions = new() { },
            ButtonOptions = new ThemeButtonOptions { },
            DropdownOptions = new ThemeDropdownOptions { },
            SwitchOptions = new ThemeSwitchOptions() { },
            TabsOptions = new ThemeTabsOptions() { },
            ModalOptions = new ThemeModalOptions { },
            ProgressOptions = new ThemeProgressOptions { },
            AlertOptions = new ThemeAlertOptions { },
            BreadcrumbOptions = new ThemeBreadcrumbOptions { },
            BadgeOptions = new ThemeBadgeOptions { },
            PaginationOptions = new ThemePaginationOptions { },
            TooltipOptions = new ThemeTooltipOptions { },
        };
    }
}
stsrki commented 3 years ago

What do you have in index.html or _Host.cshtml? Can you post the content?

TorbjornEliasson commented 3 years ago

_Host.cshtml

@page  "/{handler?}"
@using Microsoft.AspNetCore.Mvc.Localization
@namespace Blazor.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@inject IViewLocalizer Localizer
@using Microsoft.AspNetCore.Authorization
@attribute [AllowAnonymous]

@model _HostAuthModel

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Corptrade.NET</title>
    <base href="/" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="css/stepper.css" rel="stylesheet" />
    <link href="css/spinner.css" rel="stylesheet" />
    <link href="Blazor.styles.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <link href="css/material.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i|Roboto+Mono:300,400,700|Roboto+Slab:300,400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
    <link href="_content/Blazorise.Material/blazorise.material.css" rel="stylesheet" />
    <link href="_content/Blazorise.Sidebar/blazorise.sidebar.css" rel="stylesheet" />
    <link href="_content/Blazorise.Snackbar/blazorise.snackbar.css" rel="stylesheet" />
    <link href="_content/Blazorise.Icons.Material/blazorise.icons.material.css" rel="stylesheet" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#8e3636">
</head>

<body>
    @{
        this.HttpContext.Response.Cookies.Append(
          Microsoft.AspNetCore.Localization.CookieRequestCultureProvider.DefaultCookieName,
          Microsoft.AspNetCore.Localization.CookieRequestCultureProvider.MakeCookieValue(
            new Microsoft.AspNetCore.Localization.RequestCulture(
                System.Globalization.CultureInfo.CurrentCulture,
                System.Globalization.CultureInfo.CurrentUICulture)));
    }

    <app style="height:100vh;">
        @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
    </app>

    <div id="blazor-error-ui" class="bg-danger text-light" style="font-size:20px;">
        <environment include="Qa,Production">
            @Localizer["UnexpectedErrorProd"]
        </environment>
        <environment include="Development,Test">
            @Localizer["UnexpectedErrorDev"]
        </environment>
        <a href="" class="reload text-warning ml-1" style="font-weight:bold;">@Localizer["Reload"]</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.server.js"></script>
    <script src="app.js"></script>

    <!--Added 2019-10-19-->
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Material JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script src="js/material.min.js"></script>
    <script src="_content/Blazorise/blazorise.js"></script>
    <script src="_content/Blazorise.Material/blazorise.material.js"></script>
    <script src="_content/Blazorise.DataGrid/blazorise.datagrid.js"></script>
    <script src="_content/Blazorise.RichTextEdit/blazorise.richtextedit.js"></script>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

    <script src="_content/Blazorise.Charts/blazorise.charts.js"></script>
    <script>
        function ShowModal(modalId) {
            $('#' + modalId).modal('show');
        }
        function CloseModal(modalId) {
            $('#' + modalId).modal('hide');
        }
    </script>
    <script src="~/js/JavaScript.js"></script>
    <script src="~/scrollto.js"></script>
    <script src="~/notifications.js"></script>
    <script src="~/js/GoogleCharts/ScheduleTimelineChart.js"></script>
</body>
</html>
stsrki commented 3 years ago

Ordering could be better

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Corptrade.NET</title>
<base href="/" />

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#8e3636">

<link href="css/material.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i|Roboto+Mono:300,400,700|Roboto+Slab:300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
<link href="_content/Blazorise.Material/blazorise.material.css" rel="stylesheet" />
<link href="_content/Blazorise.Sidebar/blazorise.sidebar.css" rel="stylesheet" />
<link href="_content/Blazorise.Snackbar/blazorise.snackbar.css" rel="stylesheet" />
<link href="_content/Blazorise.Icons.Material/blazorise.icons.material.css" rel="stylesheet" />

<link href="css/stepper.css" rel="stylesheet" />
<link href="css/spinner.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
<link href="Blazor.styles.css" rel="stylesheet" />

but other than that, I don't see anything wrong.

Did you try to inspect buttons in devtools to see what is overriding the styles?

TorbjornEliasson commented 3 years ago

Yes I have inspected. Here it is: image

stsrki commented 3 years ago

Anything with inline styles?

image

TorbjornEliasson commented 3 years ago

No I dont think so. I must confess that my knowledge here is limited. However if I compare the classes use for outline.primary it differs. Ouline uses .a and primary uses .modal. Is this correct?

image

stsrki commented 3 years ago

OK, so it is called inline in Firefox. Same thing as style in Chrome.

I really don't know why theming would work partially. This is the first time I'm seeing it reported.

TorbjornEliasson commented 3 years ago

Trying to find out a solution I have found this. Adding a selector in my css overrides the base color for a primary button in a modal window.

.modal .btn-primary { background: #ff7d3c !important; color: black !important;
}

Could this be fixed in Blazorise?

stsrki commented 3 years ago

It could be, but the problem with !important is that it is hard for anyone else to override styles if it is already defined as !important in Blazorise, or any library for that matter. It should be avoided if possible.

If it works in your case then it is OK to leave it in your project. But I would really like to investigate why the theming is not working. So if you could create a small project to reproduce it would be really helpful.

TorbjornEliasson commented 3 years ago

Here is a project where its reproduced. Click on Show Modal on Start page and you see the result.

BlazoriseMaterialModal.zip

stsrki commented 3 years ago

So it seems I will need to add additional styles for the Material provider. When button is placed inside of modal they have more specific selectors and they override the ones generated by the theme provider.

Thanks for the project, it helped to find the problem. I will fix it for the next update.