Css in isolated files do not apply. #591

aspramsh · 2021-01-15T13:47:28Z

I use MudButton. I would like to customize for example text color, when I do it with Style attribute or write it in
app.css everything works just fine. But when I move the styling to my component's .css it does not work. Here is my style

.mud-button-text { color: black; }

Actually when I change MutButton to a common button CSS isolation works just fine.

The text was updated successfully, but these errors were encountered:

HClausing · 2021-01-15T19:27:21Z

It can be related to your project. It's created on .net 5 or upgraded from net core 3.x ?

On my last project creation, the css declared link was changed to: <link href="ProjectName.styles.css" rel="stylesheet" /> on head tag.

I have some projects upgraded from .net core 3.x that don't work with CSS isolation.

aspramsh · 2021-01-15T20:21:24Z

My project has initially been created with .Net 5.

henon · 2021-01-16T19:38:31Z

@porkopek do you know a solution to this?

porkopek · 2021-01-16T20:06:57Z

Hard to tell without seeing the code, but maybe is specificity related
1). Check in the browser Developer Tools if when creating the same rule it gets applied. With CSS isolation, you also have to take into account CSS specificity. So, in this page, when you create the rule .mud-button-text{color:yellow}, the text of this button gets yellow?
2). Is your button a text-button with no color set? Because if color is set, like Color.Primary, your rule has a lower specificity, because the <MudButton Color="Color.Primary" /> has

.mud-button-text.mud-button-text-primary {
    color: var(--mud-palette-primary);
}

that is more specific than your rule
3). Try adding !important to your rule. If this way it gets applied, it's a specificity thing.

aspramsh · 2021-01-17T20:00:05Z

Important does not help, when I do in with Style="...", it works fine, also when I add the same style with html <style></style> tag, it works.

mikes-gh · 2021-01-18T08:25:26Z

@aspramsh please could you post what you have in head on your index.html page

aspramsh · 2021-01-18T11:06:08Z

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Some title.</title>
    <base href="/" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="ProjectName.styles.css" rel="stylesheet" />
    <!--Mud blazor-->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
</head>

porkopek · 2021-01-18T11:20:30Z

I keep thinking this is a specificity thing, that's because with Style works.
For starters, you have your stylesheets before MudBlazor ones, and you should have it after. I think this is the issue
Did you do this:

Check in the browser Developer Tools if when creating the same rule it gets applied. With CSS isolation, you also have to take into account CSS specificity. So, in this page, when you create the rule .mud-button-text{color:yellow}, the text of this button gets yellow?

HClausing · 2021-01-18T11:31:55Z

ProjectName

At this line:

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

Keep in mind that the "ProjectName" must match our project's name. It's just an example when I wrote this on trying to help you.

Real example, on a project called "CAE.Server":

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@(Resources.String.MainLayout.Title) - Central de Aplicativos Eficaz</title>
    <base href="~/" />
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
    <link href="_content/EficazFrameworkCore.Blazor/css/efcore-styles.min.css" rel="stylesheet" />
    <link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    <link href="CAE.Server.styles.css" rel="stylesheet" />
</head>

aspramsh · 2021-01-18T11:36:15Z

Sure, it is okay, CSS isolation works for other components for example <button></button> but not for MudBlazor components.

porkopek · 2021-01-18T11:40:13Z

button is not styled, so it can work. MudBlazor components are all styled, and if your rule has lower precedence than MudBlazor ones, is not going to be applied. So you have to ensure higher specificity.
First of all, put your stylesheet under the MudBlazor one, like in @HClausing example

HClausing · 2021-01-18T16:48:26Z

Tried here and can't get it working either on MudButton, but if I change the last attribute on MudButton manually it works:

To:

==================

By the moment, I suggest you use MudThemeProvider and customize the colors.
Example: https://mudblazor.com/customization/theming/overview

HClausing · 2021-01-18T17:03:54Z

@aspramsh , try to use ::deep after you class declaration:

::deep .mud-button-text { color: black; }

It worked for me.

Special thanks for @zHaytam for the help.

porkopek · 2021-01-19T11:21:38Z

This could shed more light on this issue
dotnet/aspnetcore#29409

henon · 2021-01-19T11:26:27Z

@porkopek do you fully understand the problem now? I read it but I didn't get it ;)

henon · 2021-01-19T11:37:51Z

Nevermind, I got it now after your explanation on gitter:

Porkopek @porkopek Jan 18 20:50
It seems to me that it's a bug in the way the RenderTreeBuilder makes the component
With an span element, it makes this code
__builder.OpenElement(0, "span");
__builder.AddAttribute(1, "b-h03bphfufo");
Where "b-h0..." is the unique identifier
that makes CSS isolation possible
But when the top element it's a component, in this case TgmTable, it generates this
__builder.OpenComponent<TgmTable>(0);
__builder.AddAttribute(1, "DataSource",
So no "b-h0..." attribute it's applied

porkopek · 2021-01-19T11:48:05Z

The problem of the OP I can't be sure what it is, because she didn't answer to the questions I make her, nor show us all the code, but what I learnt from this issue is that if you have a component from an external library and it is used outside of scope of the isolation, it won't work, so you need to wrap it in a <span> for example.

For ::deep to work, it has to attach itself to an html element, it won't do it to a component.

If you have a page like

@page "/index"
<Table Datasource="@Datasource"/>

a component Table.razor that is like

<table>
...
</table>

the Index.razor.css file is

::deep table{
  border:2px solid red;
}

What the isolation produces is something like

[a GUID here] table{
  border:2px solid red;
}

but your component Table doesn't have the [a GUID here] attribute, so doesn't get applied.

However, if you wrap it in a div

<div>
  <Table Datasource="@Datasource"/>
</div>

The blazor/razor engine gives to this div the [a GUID here] attribute, so the CSS rule works

<div [a GUID here]>
  <Table Datasource="@Datasource"/>
</div>

aspramsh · 2021-01-19T13:21:06Z

In this case the rule gets applied to the div, but I need to override mud-blazor styles. For example I would like to have nav-items text in white, here is my CSS

.mud-nav-link-text {
    color: white !important;
}

This does not work in NavMenu.razor.css file, when I put navigation component, b-5fjnqwri5o applies to my div element, but the
text color does not change.

porkopek · 2021-01-19T13:33:38Z

Please, show us the markup.
Also, I don't see the ::deep in your css rule

HClausing · 2021-01-19T13:48:58Z

In this case the rule gets applied to the div, but I need to override mud-blazor styles. For example I would like to have nav-items text in white, here is my CSS
.mud-nav-link-text {
    color: white !important;
}
This does not work in NavMenu.razor.css file, when I put navigation component, b-5fjnqwri5o applies to my div element, but the
text color does not change.

Please try this:

::deep .mud-nav-link-text {
    color: white !important;
}

aspramsh · 2021-01-19T14:02:29Z

@HClausing that helped, thank you.

aspramsh · 2021-01-19T14:10:09Z

@HClausing that helped, thank you.

henon · 2021-01-19T14:10:27Z

I know @Garderoben thinks our documentation should not be a "How-To-Blazor-Wiki" but I would make an exception for this and document it (i.e. under Customization) for future reference because I have seen it comes up many times on the chat and we can then simply post the url of the page.

henon · 2021-01-20T13:10:17Z

I discovered a similar question on Stackoverflow and answered with what I learned from you guys. Hope it is all correct, if not, please let me know.

porkopek · 2021-01-20T16:39:26Z

Enlightening others could never be wrong :-)

aspramsh added the bug Something does not work as intended/expected label Jan 15, 2021

henon added answered question Further information is requested and removed bug Something does not work as intended/expected labels Jan 19, 2021

henon closed this as completed Jan 20, 2021

mikes-gh mentioned this issue Feb 25, 2021

Component Library and component css class isn't updated #1007

Closed

rfcdejong mentioned this issue Apr 13, 2021

Make the MudMainContent fit the remaining screen and add a sticky footer bottom #746

Closed

porkopek mentioned this issue May 19, 2021

MudAutoComplete - CSS Isolation of .mudpopover #1606

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Css in isolated files do not apply. #591

Css in isolated files do not apply. #591

aspramsh commented Jan 15, 2021 •

edited

HClausing commented Jan 15, 2021

aspramsh commented Jan 15, 2021

henon commented Jan 16, 2021

porkopek commented Jan 16, 2021

aspramsh commented Jan 17, 2021

mikes-gh commented Jan 18, 2021

aspramsh commented Jan 18, 2021 •

edited

porkopek commented Jan 18, 2021

HClausing commented Jan 18, 2021 •

edited

aspramsh commented Jan 18, 2021

porkopek commented Jan 18, 2021 •

edited

HClausing commented Jan 18, 2021

HClausing commented Jan 18, 2021

porkopek commented Jan 19, 2021

henon commented Jan 19, 2021

henon commented Jan 19, 2021

porkopek commented Jan 19, 2021

aspramsh commented Jan 19, 2021

porkopek commented Jan 19, 2021

HClausing commented Jan 19, 2021

aspramsh commented Jan 19, 2021

aspramsh commented Jan 19, 2021

henon commented Jan 19, 2021

henon commented Jan 20, 2021

porkopek commented Jan 20, 2021

Css in isolated files do not apply. #591

Css in isolated files do not apply. #591

Comments

aspramsh commented Jan 15, 2021 • edited

HClausing commented Jan 15, 2021

aspramsh commented Jan 15, 2021

henon commented Jan 16, 2021

porkopek commented Jan 16, 2021

aspramsh commented Jan 17, 2021

mikes-gh commented Jan 18, 2021

aspramsh commented Jan 18, 2021 • edited

porkopek commented Jan 18, 2021

HClausing commented Jan 18, 2021 • edited

aspramsh commented Jan 18, 2021

porkopek commented Jan 18, 2021 • edited

HClausing commented Jan 18, 2021

HClausing commented Jan 18, 2021

porkopek commented Jan 19, 2021

henon commented Jan 19, 2021

henon commented Jan 19, 2021

porkopek commented Jan 19, 2021

aspramsh commented Jan 19, 2021

porkopek commented Jan 19, 2021

HClausing commented Jan 19, 2021

aspramsh commented Jan 19, 2021

aspramsh commented Jan 19, 2021

henon commented Jan 19, 2021

henon commented Jan 20, 2021

porkopek commented Jan 20, 2021

aspramsh commented Jan 15, 2021 •

edited

aspramsh commented Jan 18, 2021 •

edited

HClausing commented Jan 18, 2021 •

edited

porkopek commented Jan 18, 2021 •

edited