How to customize Syncfusion EJ2 Components?

Overview

This article explains about detailed information about tools that Syncfusion provided for customizing Syncfusion Essential Studio^® JavaScript 2 components.

Use Case Scenarios

Each has specific requirements based on several factors such as user base, development environment, and so on. The following are the two most common situations in this regard.

1. Theme Customization

a)Theme Studio

b)SCSS Compilation

2. Style Customization (margin, padding, etc.)

a)Custom CSS Classes

b)Graphic Design Tools (Sketch, Figma, Adobe XD)

Theme Customization

Theme Studio

Syncfusion offers an online tool called "ThemeStudio" that allows you to create CSS theme files for various color combinations. The following documentation link provides you the detailed information on this.

Theme Studio Documentation: https://ej2.syncfusion.com/documentation/appearance/theme-studio

Theme Studio: https://ej2.syncfusion.com/themestudio/?theme=material

SCSS Compilation

Also, you can compile Syncfusion SCSS file with custom color using “node-sass” as mentioned in the following code example.

$primary: #a94442 !default;
$accent: #3c763d !default;
 
import “ej2/material.scss”;

Style Customization

Custom CSS Classes

Other than color, you can customize EJ2 components with a custom CSS class that starts with “e-“. Under each EJ2 component's documentation, there is a section called "Style and Appearance" that lists frequently asked customizations. You can find couple of these from the following link.

https://ej2.syncfusion.com/javascript/documentation/schedule/scheduler-styling

https://ej2.syncfusion.com/javascript/documentation/accordion/style

Graphic Design Tools (Sketch, Figma, and Adobe XD)

Syncfusion provides provided design files of our themes in three major designer tools such as Sketch, Adobe XD, and Figma. 

The purpose of these files is to bridge the gap between the designers and the developer. UX/UI designers can use these design files to create designs based on these files. Developers can consume the modified CSS values from these designer files and manually feed them in code. 

Conclusion

I hope you enjoyed learning about how to customize Syncfusion EJ2 Components.

You can refer to our JavaScript feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!