How to use SCSS in Syncfusion React Component?

Overview

This article is about using SCSS files in React application, created by using the “create-react-app” utility.

Prerequisite

• Node
• NPM
• Create React App
• Node SASS

Installing Node & NPM

For installing Node.js in your machine, download the LTS (Long Time Support) version of windows setup from the following link.

https://nodejs.org/en/

NPM (Node Package Manager) will be installed automatically along with Node.js setup.

Installing Create React App

Install the “create-react-app” utility package using the following NPM Command.

Creating React Application

Use the following command to create react application.

Installing Node Sass Package

You can install the “node-sass” package using the following command.

Create .env file

Create .env file in the root directory of the React application for setting SASS include path variables.

Rename the “.css” to “.scss”

Rename all the CSS file extension with SCSS file extension.

Customizing Syncfusion Theme using the SCSS Variables

Now, you can customize the Syncfusion theme using the SCSS variables as follows.

 
$accent: blue;
@import "../node_modules/@syncfusion/ej2-react-buttons/styles/material.scss";
 

You can refer the Syncfusion documentation to integrate Syncfusion React components into React application.

Conclusion

Now, run the application using “npm run start”.

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