What CSS technology should I use with Syncfusion?

[Koichiro]

The CSS provided by Syncfusion is only for Syncfusion components, so if I want to add own components to my application, I will need to use a different CSS technology.

1, For example, does Syncfusion have any opened css classes, like utility or grid-system? I looked for it, but couldn't find it.

2, If not, should I prepare my own CSS or CSS framework additionally? If so, is that okay to do so?

3, Is it bad practice to customize the SCSS theme files provided by Syncfusion and make the utility classes by myself? For example, primary color etc. I expect I'll have to do this if I want to consider switching themes. However, since I think it is a fundamental topic for most of the syncfusion users, I wonder if there is any official solution available.

4, I found the official samples are using bootstrap and raw CSS additionally. If I use bootstrap, it will only fit with bootstrap themes out of the several themes that Syncfusion provides by default, right? For example, if I use bootstrap additionally, should I give up using themes like tailwind, fabric etc?

[Jesus Arockia Sankaran S]

Hi Koichiro, 

Thank you for contacting Syncfusion support.  

Syncfusion EJ2 components are styled using normal CSS features but all styles related to Syncfusion components are included using custom class with “e-“ prefix. So, Syncfusion component styles will not be affected by external styles.  

We can use Syncfusion components with all layout designed with any third party libraries. Also, Syncfusion provided theming support for Material, Bootstrap, Bootstrap4, Fabric, Tailwind CSS. Syncfusion Theming support mainly concentrates on emulating standard color schemes, dimensions only. We request you to check the below blog post regarding the customization options of Syncfusion components. 

https://www.syncfusion.com/kb/12464/how-to-customize-syncfusion-ej2-components 

Please get back to us if you have any queries. 

Regards, 

Jesus Arockia Sankaran S 

[Koichiro]

Hi, Jesus Arockia Sankaran.

Thank you very much for your answer.You mean below?

1, No there aren't

2, Yes, you should prepare own CSS for your additional components

4, Yes, you should give up to switch multiple styles(tailwind ⇔ bootstrap ⇔ fabric ⇔ ...) on same site. You can switch only color scheme if you add some self-made component in specific style(tailwind, bootstrap, or fabric etc).

OK, I prepare own css or css library, and give up on being able to switch between multiple styles when I add other component by myself in a project.

How about No.3? Based on what you answered, I'm guessing the answer is "it's a BAD PRACTICE because there aren't enough of them to force us to open them as utility classes, so we end up with not enough of them"?

[Jesus Arockia Sankaran S]

Hi Koichiro, 

Thank you for the update. 

We have checked again your queries and you can find the customization details from the below link.  

Query 1: 

Syncfusion EJ2 Components are reusable elements such as input, button, etc.. inside a web page layout. So, the styling can be achieved by using simple CSS features by applying it through custom CSS classes with “e-“ prefix. On the other hand, grid-system like features of CSS is mainly/mostly used for layout design. We can assure that Syncfusion EJ2 components can be used in any layout design without any issue.  

Query 2: 

We are not able to get your point clearly here. But, we can reiterate you that the Syncfusion component styles can only be overridden by already defined custom CSS classes with “e-“ prefix.  

Query 2: 

We have provided option only to customize the color scheme of the themes and you can do it either using Theme Studio or SCSS compilation. But, we have to compile the required themes in build time itself and we request you to go through the KB (Knowledge Base) document for more details about dynamically changing the theme. We have explained the complete capability of dynamic theme switching of the Syncfusion components.  

https://www.syncfusion.com/kb/10868/how-to-load-themes-dynamically-in-syncfusion-components 

We can only customize the color schemes using SCSS variables presented in the Theme Studio and we can not completely customize the Syncfusion components dimension using SCSS customization. For that, we have already provided the options Graphic tools (Figma, Sketch, Adobe XD) in the below KB document.  

https://www.syncfusion.com/kb/12464/how-to-customize-syncfusion-ej2-components 

Query 4: 

Syncfusion EJ2 components will not have any third party dependency either in CSS or JavaScript. We just use the standard dimension values and color scheme of the third party theme so you can use Syncfusion Material Theme in a webpage layout which is designed using Bootstrap. But, if you mixing actual Bootstrap components in the application with Syncfusion components with Material theme both will be in different color scheme and dimension. 

Note: For example, we can only use the bootstrap layout with any Syncfusion supported themes for Syncfusion components. 

Regards, 

Jesus Arockia Sankaran S 

[Koichiro]

Thank you very much! Sorry for bad English, thank you for your kind reply.

Can I try to write plain English without deepl? If you (or any other) are ok, please stay with me a little longer.

-------------------------------------------if you are ok, please read below --------------------------------------

I understand syncfusion ej2 components are closed with "e-" prefix. And I understand I can overwrite the theme, by scss variable. And I understand I can use other css. I understand I can dynamically change the theme. I understand I can only customize the color schemes.

But I still can't understand this: When I use syncfusion in my project, I will want to add some components. Then, a problem happen. Syncfusion ej2 doesn't provide css class of color, like primary color, secondary color, background color. So, I can't match colors between syncfusion components and self-made components. If syncfusion ej2 have some css class like primary color, secondary color, bg-color(of current theme) by default, there are no problem. But the real is not like so. How to manage it?

I want dark theme and light theme. But because of this problem, it's difficult. I sure understand syncfusion ej2 components supports theme switching, I know. But, What about self-made components? Syncfusion don't have theme color css class by default, I can't apply to my additional components like "primary-color". I think this is problem. I still can't understand how to accomplish this usecase. Am I missing something? syncfusion can accomplish this usecase? I just want to add dark mode and light mode for my product, without dirty solution.

[Jesus Arockia Sankaran S]

Hi Koichiro,  

Thank you for the detailed update. 

We suspect that CSS variable like feature for Syncfusion components to change the theme dynamically in runtime using the variable value. If it is so, as we said already Syncfusion theme SCSS can not be compiled in runtime and it can only compiled in build time. You can find the detail in the comment section of already shared KB. 

 

If you are looking for color scheme of Syncfusion components, we have provided it in the below documentation link where we can find the color code for all themes. 

https://ej2.syncfusion.com/react/documentation/appearance/theme/#googles-material 

Please get back to us if you have any queries. 

Regards, 

Jesus Arockia Sankaran S