Customize Syncfusion Blazor components

[Stephanie Koronidou]

Dear Support,

I am trying to customize the components using the provided instructions(but using the material theme):

https://blazor.syncfusion.com/documentation/common/how-to/customize-font-size-and-color/#how-to-customize-the-font-size-and-color-in-syncfusion-blazor-components

$primary: #253746;

$accent: #00A3E0;

@import 'ej2-base/styles/material.scss';

@import 'ej2-calendars/styles/material.scss';

However, I am getting the below error message:

/* Error: Top-level selectors may not contain the parent selector "&".

 *     ,

 * 258 | /   .e-bigger#{&}.e-calendar,

 * 259 | |   &.e-bigger #{&}.e-calendar {

 *     | '-----------------------------^

Can you please assist on this? 

Also, I want to change the $primary and $accent variables for all components. What is the suggested way to do that? 

Do I have to import the styles of every single component? 

[Jesus Arockia Sankaran S]

Hi Stephanie, 

Thank you for contacting Syncfusion support.  

We have checked the reported issue and we are not able to reproduce it in our end. We have created a sample for your reference for modifying primary and accent color of all components in material theme.  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorCustomStyle779323013 

Code Snippet: 

 

We request you to share more details such as screen shot, video (screen capture), sample application, code snippets for clear understanding if we misunderstood your problem. 

Please get back to us if you need any further assistance on this. 

Regards, 

Jesus Arockia Sankaran S 

[Stephanie Koronidou]

Hello,

Thank you for the reply.

Please note that I am using sass executable (https://sass-lang.com/install) and not the web compiler to compile .scss to .css since I need this to be done at build time. 

The command I am using is the following: sass --load-path=node_modules/@syncfusion  wwwroot/styles/custom.scss wwwroot/css/Style.css

However I am getting the below error during compilation.

Please note that this error does not appear for all of syncfusion scss files. For example I am not getting any error during the compilation of the below

[Jesus Arockia Sankaran S]

Hi Stephanie, 

Thank you for the information.  

We have checked the issue with shared details and we are not able to reproduce the reported issue. We have checked with latest NPM package version of both “18.1.53” and “18.1.054” of “@syncfusion/ej2” but we are not able to reproduce the issue in our end. We also ask you to check the video for further reference. 

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/stylecompile626259065 

We request you to follow the below steps to update the latest NPM package, 

1. Delete the “node_modules” folder and “package-lock.json” file
2. Run the command “npm cache clean - - force”  
3. Change the “@syncfusion/ej2” package version into any of the above version in package.json file

Please get back to us if you need any further assistance on this. 

Regards, 

Jesus Arockia Sankaran S 

[Stephanie Koronidou]

Hello,
Thank you for the reply.

I have seen the video. Using the web compiler I do not have any issues, no error, everything is fine. 

However, as explained I am using sass (https://sass-lang.com/install) to compile scss to css  and not the web compiler since I need this to be done at build time.
Specifically the command:

          sass --load-path=node_modules/@syncfusion  wwwroot/styles/custom.scss wwwroot/css/Style.css

So sass is returning the error I have sent on my previous post.

[Jesus Arockia Sankaran S]

Hi Stephanie, 

We are extremely sorry for the inconvenience.  

We have checked the reported issue and we are able to reproduce it in our end. We want to inform you that we have already logged a feature report for supporting SASS compilation and it will be available with our Volume 2, 2020 release that you can track from the below link.  

Link: https://www.syncfusion.com/feedback/8141/provide-latest-sass-version-support-with-ej2-components 

If you have any more specification/suggestions to the feature request you can add it as a comment in the portal. 

Meanwhile, we request you to use “node-sass” for the SCSS compilation until we complete the above feature. 

>> node-sass -g install 

>> node-sass --include-path=node_modules/@syncfusion  wwwroot/styles/custom.scss wwwroot/css/Style.css 

Please get back to us if you need any further assistance on this. 

Regards, 

Jesus Arockia Sankaran S