How to dynamically generate CSS rules in Blazor

Question

In other words, I need to generate css classes and inject them somehow into the page.

I need to modify the classes at runtime in C#.

Why? Let's say my razor component renders thousands of elements and I need to change width of all those elements. Rather than modifying style attribute on many elements I would like to just modify single css rule.

JS interop is acceptable.

Inject a style element to the head section of the page. You can put the rules you need to override to that inline sheet, they will have higher specifity on the page when it's rendered on the client. — Teemu
– Teemu, Commented Feb 25, 2021 at 15:41

Ed Charbeneau · Accepted Answer · 2021-03-02 16:12:22Z

16

First, avoid placing style tags inside components. Each time the component is rendered, so is the style tag. In addition, it makes it difficult for other developers to find your CSS if it is scattered all over the app in components.

I don't normally suggest using inline styles, but CSS variables have really changed my outlook on this. CSS property variables allow you to dynamically pass values to your CSS at runtime using the style attribute.

@* This belongs in app.css *@
<style>
    :root {
        --my-width: 100px;
    }
    .example {
        background-color: #ccc;
        width: var(--my-width);
    }
</style>
@* ^ This belongs in app.css *@

<h1>Hello, Blazor REPL!</h1>
<label>Width</label>
<input @bind-value="@width" />
<p class="example" style="--my-width: @width">My Width is @width</p>

@code {
    string width = "100px" ;
}

You can see an example of this running in the browser here. https://blazorrepl.com/repl/cFOdkmPA10gU73Hl18

answered Mar 2, 2021 at 16:12

Ed Charbeneau

4,67426 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Liero Over a year ago

This is very interesting indeed. I wasn't aware that I could manipulate variable in inline style. Let me think about whether I can use it in my scenario

Mheriff Mar 4 at 13:04

Blazor actually wants us to put css into an accomaning file of our components, i.e. some.razor.css. This actually also means that we scatter our css files all over the app in components ;)

Ogglas · Accepted Answer · 2022-11-11 15:54:32Z

0

I had a similar thing I needed to edit in Blazor. Long story short is MatBlazor Tabs adds a style="pointer-events: auto;" that I needed to disable when loading data.

https://www.matblazor.com/Tab

I solved it like this:

index.html:

window.ChangeMatBlazorTabPointerEvents = (loadData) => {
    var allTabs = document.querySelectorAll('.mdc-tab__content');
    allTabs.forEach((tab) => {
        if (loadData) {
            tab.style.pointerEvents = 'none';
        }
        else {
            tab.style.pointerEvents = 'auto';
        }
    });
}

Blazor (razor) file::

@inject IJSRuntime JSRuntime

await JSRuntime.InvokeVoidAsync("ChangeMatBlazorTabPointerEvents", loadData);

Example why I had to do it:

<MatTab Label="Threats and Countermeasures" Style="pointer-events: inherit;">

Renders this:

<div class="matBlazor_theme_12345678-1234-1234-1234-123456789012 mat-tab-label mdc-tab" style="pointer-events: inherit;" role="tab" tabindex="0" id="matBlazor_id_82bcf7fc-5f04-48a0-aff0-d24dcc0b0ac3" _bl_92=""><!--!-->
    <span class="mdc-tab__content" style="pointer-events: auto;"><!--!-->
        <span class="mdc-tab__text-label">Threats and Countermeasures</span><!--!-->
    </span><!--!-->
    <span class="mdc-tab-indicator "><!--!-->
        <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
    </span><!--!-->
    <span class="mdc-tab__ripple"></span>
</div>

Does not currently work due to <span class="mdc-tab__content" style="pointer-events: auto;">

The following code does not work either since the tab will still have style="pointer-events: auto;"

<MatTab>
    <LabelContent>
        <span style="@((loadData ? "pointer-events: none;" : ""))"> Threats and Countermeasures </span>
    </LabelContent>
    <ChildContent>
        Content
    </ChildContent>
</MatTab>

answered Nov 11, 2022 at 15:54

Ogglas

71.4k43 gold badges387 silver badges484 bronze badges

3 Comments

Liero Over a year ago

I struggle to see how is this related to my problem. I know how to modify css property via javascript, but that's not what I need

Ogglas Over a year ago

@Liero I thought about this line Let's say my razor component renders thousands of elements and I need to change width of all those elements.. Given that they have a specific class you could edit width for all those using my code example.

Liero Over a year ago

Ah, ok, thanks. I wanted to avoid modifying all those elements, but it seems untrivial

Collectives™ on Stack Overflow

How to dynamically generate CSS rules in Blazor

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related