1. Home
  2. Forum
  3. Blazor
  4. Apply Custom Css Style For Syncfusion Components

Apply Custom Css Style For Syncfusion Components



Here is my custom component which use Sfbutton. My question is how can I apply my defined css class in Demo.razor.css file for Sfbutton in my demo compoment.
I tried several way but the styling only work if I define css class directly in <style> tag. I have to put it in the root css file which register in <head> tag. Is there any change if I can I apply my defined css class in Demo.razor.css file for Sfbutton in my demo compoment?

3 Replies
GK Gayathri KarunaiAnandam Syncfusion Team June 22, 2021 01:42 PM UTC

Hi Pham Van Khoa, 

We have checked your reported query. We have prepared a sample in which we have mentioned the CSS style in the custom.scss file. When we write the code in custom.scss file, it is compiled and saved in custom.css in the wwwroot folder as mentioned in the compilerconfig file. Please check the below code snippet. 
[Index.razor] 
 
@using Syncfusion.Blazor.Buttons 
 
<SfButton CssClass="e-primary test" >Button</SfButton> 

[custom.scss] 

$red: red; 
.test { 
    background-color: $red !important; 
    border-radius: 20px; 
} 

[Compilerconfig.json] 
 
[ 
  { 
    "outputFile": "wwwroot/styles/custom.css", 
    "inputFile": "styles/custom.scss", 
    "options": { 
      "includePath": "node_modules/@syncfusion" 
    } 
  } 
] 

For your reference, we have prepared a sample based on your requirement. Please check the sample. 


Please get back to us, if you need further assistance. 

Regards, 
Gayathri K 


PV Pham Van Khoa June 22, 2021 02:37 PM UTC

No i don't want to save compiled css file to wwwroot, i want compiled css file is stick together with my component. 


For example in this image, i have Demo.razor.scss file and i compiled it to Demo.razor.css file and these file are stick together with Demo.razor. Can it be possible?


GK Gayathri KarunaiAnandam Syncfusion Team June 23, 2021 07:59 AM UTC

Hi Pham Van khoa, 

We have checked your reported query. We can refer the compiled CSS file inside your Component folder. We have prepared a sample in which we have created a Demo.razor.scss file inside Component folder. Demo.razor.scss file is compiled to Demo.razor.css file within the Component folder. We have used the compiled CSS file as the stylesheet for the Project. Please check the below code snippet and sample. 

[Component/Demo.razor] 

 
@using Syncfusion.Blazor.Buttons  
  
<SfButton CssClass="e-primary test" >Demo</SfButton> 

[Component/Demo.razor.scss] 
 
$red: red; 
 
.test { 
    background-color: $red !important; 
    border-radius: 20px; 
} 

[Compilerconfig.json] 

[ 
  { 
    "outputFile": "Component/Demo.razor.css", 
    "inputFile": "Component/Demo.razor.scss", 
    "options": { 
      "includePath": "node_modules/@syncfusion" 
    } 
  } 
] 

[index.html] 

<link rel='nofollow' href="Component/Demo.razor.css" rel="stylesheet" /> 

For your reference, we have prepared a sample based on your suggestion. Please check the sample. 


Could you please check the above sample and get back to us with more information if we misunderstood your requirement so that we can analyze based on that and provide a better solution? The information provided would be great help for us to proceed further.  

Regards, 
Gayathri K 


Loader.
Up arrow icon