How can I change css directly(without variable) in Blazor?

Question

I am using the server-side of Blazor.

I want to change the CSS of the body.

In Jquery I can write the code like this easily:

$("body").css("overflow-y","hidden");

However, with this tutorial(Blazor Change Validation default css class names) said, it seems I can only change the CSS by changing the class name.

It is so complex while crossing the component, especially the body is at the top of all the components.

I wonder whether there is a way can changes CSS directly in Blazor. Thank you.

Solution 1

Well, Blazor does not support direct css modification yet, since Web Assembly doesn't. Anyway heads up, it is on the road-map for Web Assembly/Blazor.

Therefor your best bet is, changing the class name with variables. At least for now.

Solution 2

There are several ways of getting out of the "blazor way" of doing things and accomplishing css modification of an element.

Simplest: Just like you can use the class attribute, use the style attribute

<element style=@myStyle></element>

@code {
  string myStyle;

  void MyMethod() {
     myStyle="overflow-y: hidden;"
  }
}

Advanced: Use JS interop

a. In the main view (index.html or Pages/_Host.cshtml depending on project type), create a js endpoint for your component

<script>
   window.applyStyleForElement = function(styleOp) {
       document.getElementById(styleOp.id).style[styleOp.attrib] = styleOp.value;
   }
</script>

b. In razor file:

@Inject IJRRuntime JSRuntime
<element id=@myId></element>

@code {
  string myId = Guid.NewGuid().ToString("n");

  async Task MyMethod() {
     await JSRuntime.InvokeAsync("applyStyleForElement", 
      new { id = myId,  attrib = "overflowY", value = "hidden" });
  }
}

Finally, applying to your special case with body element ("advanced" method above).

a. In the main view (index.html or Pages/_Host.cshtml depending on project type), create a js endpoint

<script>
   window.applyStyleForBody = function(style) {
       document.body.style[style.attrib] = style.value;
   }
</script>

b. In razor file:

@Inject IJRRuntime JSRuntime
(...)

@code {

  async Task MyMethod() {
     await JSRuntime.InvokeAsync("applyStyleForBody", 
       new { attrib = "overflowY", value = "hidden" });
  }
}

Solution 3

Well, actually there is a way to do that and it works really good (it might suffer a little delay though). I know this answer is a little bit late but it might help other people who face the same challenge.

1. We need to create some JS code that includes the wanted files:

   function includeLeftStyle() {
       appendStyle("left.css");
   }
   
   function includeRightStyle() {
       appendStyle("right.css");
   }
   
   function appendStyle(path) {
       var element = document.createElement("link");
       element.setAttribute("rel", "stylesheet");
       element.setAttribute("type", "text/css");
      element.setAttribute("href", path);
      document.getElementsByTagName("head")[0].appendChild(element);
   }
   

2. The wished CSS can be called according to the language (any other coditions) in the MainLayout:

   protected override async Task OnAfterRenderAsync(bool firstRender)
   {
        if (firstRender)
        {
            if (// is left)
            {
                await JSRuntime.InvokeAsync<object>("includeLeftStyle");
            }
            else
            {
                await JSRuntime.InvokeAsync<object>("includeRightStyle");
            }
        }
    }
   

Happy coding! :)

Comments

[sw1337]

I don't think setting the style attribute is hacky, in fact it's pretty much the standard way of setting Blazor attributes.

[Sebastatouille]

If anybody has a way to add the CSS in side appart file, but with the possibility to use kind of params, up me :)

[bvj]

Nice details. Related video segment from Oct 2021 discussing bindings among other things ASP.NET Community Standup - Blazor Native Interop with SkiaSharp