How do our React components work with the styled components

This KB article explains how our React components work with styled component.

Step 1: Create a React project using the following command.

 npx create-react-app my-react-app

Step 2:  Install the Syncfusion React packages to render the Syncfusion components

All Syncfusion React (Essential JS 2) packages are published in the npmjs.com public registry. You can choose the component you need to install. For this application, we are going to use the button component.

To install the button component, use the following command.

npm install @syncfusion/ej2-react-buttons --save

Step 3: Install the React styled-component package to access the styled component functionalities. Refer the following command to install styled components.

npm install styled-components --save

Step 4: Import the style component in the app.js file.

import styled from 'styled-components'

Step 5: Use the following code snippet to override the EJ2 component styles.

const StyledList = styled(ButtonComponent)`
  &.e-btn {
    background: #75e1ef;
    color: #00000;
  }
`;

render() {
    return (
    <StyledList type="primary" >Button</StyledList>
   
    );
  }

Step 6: Refer the following command to run the application.

npm start

You can find the demo sample in the following link: Sample.