SCSS error while overriding property

[GUU]

Hello, I am trying to override a default variable in material.scss. I get a problem when running the app as it seems unable to find the corresponding icons.

I am using saas instead of node-saas (as it is deprecated, https://stackoverflow.com/questions/65594119/node-sass-usage-is-deprecated-and-will-be-removed-in-a-future-major-version ). 

My Style.scss looks like

$accent: #3c763d !default;

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

@import '~@syncfusion/ej2-buttons/styles/material.scss';

@import '~@syncfusion/ej2-dropdowns/styles/material.scss';

@import '~@syncfusion/ej2-grids/styles/material.scss';

@import '~@syncfusion/ej2-inputs/styles/material.scss';

@import '~@syncfusion/ej2-lists/styles/material.scss';

@import '~@syncfusion/ej2-navigations/styles/material.scss';

@import '~@syncfusion/ej2-popups/styles/material.scss';

@import "~@syncfusion/ej2-splitbuttons/styles/material.scss";

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

@import '~@syncfusion/ej2-react-pivotview/styles/material.scss';

[Manikandan Murugesan]

Hi Gonzalo, 

 

Currently, we are analyzing this at our end, and we will update further details within two business days (December 14, 2021). 

 

Regards, 

Manikandan 

[Manikandan Murugesan]

Hi Gonzalo, 

Still, we are analyzing this at our end, and we will update further details within two business days (December 16, 2021). 

 

We appreciate your patience until then. 

 

Regards, 

Manikandan 

[Manikandan Murugesan]

Hi Gonzalo, 

 

We have prepared a sample by using “sass” to override default style variable. Please find it from below link. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ej2-react6243989721107049658 

 

Note: Kindly set “SASS” path in .ENV file. 

Please let us know if you have any concerns. 

Regards, 

Manikandan 

[GUU]

This helps, Thanks!

[Manikandan Murugesan]

Hi Gonzalo, 

 

Please let us know if you have any other queries. We are always happy to assist you. 

 

Regards, 

Manikandan 

[GUU]

Hello, After applying the SASS variables, some components don't get the variable values, or they are overridden. Take as an example the DateRangePicker. As you can see in the image not all the components colors change. Could you point me to a way to change those colors?

[Ponmani Murugaiyan]

Hi GUU, 

We request you to share the details of what color need to be changed in DateRangePicker component whether daterange icon/selected date/hover date/Apply/Cancel button. Based on the details we will override the styles and update you. 

Regards, 

Ponmani M 

[GUU]

I would all, it does look weird having multiple colors. So everything that is currently red (the default color) should be changed

[Ponmani Murugaiyan]

Hi GUU, 

We have prepared sample by overriding the default color of the DateRangePicker component. Please find the sample below for reference. 

Sample: https://stackblitz.com/edit/react-ecqj6y?file=index.css 

Regards, 

Ponmani M 

[GUU]

Hello,

Thank you for your response. I don't see the use of SASS then if I have to manually change colors that are not targeted by SASS.

It is way easier to use the EssentialStudio and download the minified CSS for each component.

Thanks

[Ponmani Murugaiyan]

Hi GUU, 

We suggest you to use the Custom Resource Generator (CRG) utility. This helps to generate the minified and unminfied versions of Syncfusion EJ2 scripts and styles. You can select the required components and then generate and download the minified css file from CRG. Please find the CRG online link below,  

Link : https://crg.syncfusion.com/   

Documentation : https://ej2.syncfusion.com/javascript/documentation/common/custom-resource-generator/ 

Regards,  

Ponmani M