1. Home
  2. Forum
  3. Blazor
  4. CssClass custom

CssClass custom

in my index.razor i have written

<SfButton Content="Modal" CssClass="mibtnclas"></SfButton>

in app.css i have


.mibtnclas{
    color: red;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #0366d6;
}

......


this is not working, but if i put a style in the index.razor this works


<style>
    .mibtnclas{
        color: blue;
    }
</style>

I would like to have this class globally, how can i do it?.






3 Replies 1 reply marked as answer
AS Aravinthan Seetharaman Syncfusion Team November 10, 2020 03:57 PM UTC

Hi Jose, 

We have checked your reported query. We can achieve your requirement using global CSS style by saving the app.css file at wwwroot\app.css. Please refer below code snippets.  

Index.razor 
<SfButton Content="Modal" CssClass="mibtnclas">SfButton> 

wwwroot\app.css 
.mibtnclas { 
    color: red; 
} 
 
html, body { 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
} 
 
a, .btn-link { 
    color: #0366d6; 
} 

And refer app.css in _Host.cshtml 

_Host.cshtml 
<head> 
     ... 
 
    <link rel='nofollow' href="app.css" rel="stylesheet" /> 
head> 

For your reference, we have prepared a sample based on this. Please refer below link.  


Please let us know, if you need any further assistance.  

Regards, 
 
Aravinthan S 


Marked as answer
JO Jose November 10, 2020 07:12 PM UTC

Thank you for the answer. It worked. I appreciate the fast response.

AS Aravinthan Seetharaman Syncfusion Team November 11, 2020 06:26 AM UTC

Hi Jose, 
  
Thanks for the update. 
We are happy to hear that your issue has been resolved. Please feel free to contact us if you need any further assistance on this. 
  
Regards, 
Aravinthan S

Loader.
Up arrow icon