1. Home
  2. Forum
  3. Blazor
  4. How to get custom css to override default css?

How to get custom css to override default css?

I have a syncfusion button control in my blazor component like so:


<div class="form-group col-6 col-lg-2 ml-auto">

<SfButton IconCss="fa fa-wrench" CssClass="col-12 btn-pill-left btn-pill-right btn-warning cancel_button" OnClick="(() => Reset())">Reset</SfButton>

</div>

<div class="form-group col-6 col-lg-2">    

<SfButton CssClass="col-12 btn-pill-left btn-pill-right btn-success submit_button" OnClick="(() => Update())">Update</SfButton>

</div>

However the default sfbutton classes override the bootstrap classes resulting in buttons that do not apply the bootstrap css.  The html looks like:


<div class="form-group col-6 col-lg-2 ml-auto">
<button class="e-control e-btn e-lib col-12 btn-pill-left btn-pill-right btn-warning cancel_button" _bl_7ef308d1-1ab5-44f1-a685-2831ba111b15="">
<span class="fa fa-wrench e-btn-icon e-icon-left"></span>Reset</button></div>
<div class="form-group col-6 col-lg-2"><button class="e-control e-btn e-lib col-12 btn-pill-left btn-pill-right btn-success submit_button" _bl_a4d9beb1-2993-4491-853d-705707d643f4="">Update</button>
</div>


How do I get my custom bootstrap css to apply to the button?

1 Reply
AS Aravinthan Seetharaman Syncfusion Team July 8, 2021 01:02 PM UTC

 
Thanks for contacting Syncfusion Support. 
 
We have checked your query. We can able to resolve your issue in sample level be changing the css referring order in _Host.cshtml. Please refer the below code snippet. 
 
 
<head> 
    <link rel='nofollow' href="Server5.0.styles.css" rel="stylesheet" /> 
    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" /> 
    <link rel="stylesheet" rel='nofollow' href="css/bootstrap/bootstrap.min.css" /> 
</head> 
 
 
Index.razor 
 
@using Syncfusion.Blazor.Buttons 
 
<SfButton CssClass="col-12 btn-pill-left btn-pill-right btn-success submit_button">Button</SfButton> 
 
 
 
However, you can override required styles by using Inline css. Please refer the below code snippet 
 
 
@using Syncfusion.Blazor.Buttons 
 
<SfButton CssClass="col-12 btn-pill-left btn-pill-right btn-success submit_button">Button</SfButton> 
 
<style> 
 
    .btn-success { 
        color: #fff; 
        background-color: #28a745; 
        border-color: #28a745; 
    } 
 
</style> 
 
 
 
Could you please check the above details, and get back to us, if you need assistance on this. 
 
Regards, 
Aravinthan S

Loader.
Up arrow icon