How to customize Syncfusion React Scheduler component?

I'm using @syncfusion/ej2-react-schedule component in my React app. I've been trying to modify the default UI of the but nothing works. There is no post about it on Google and their docs is confusing to me.

My question is: how do I modify the component's default look? Like changing to background color or add hover effect ...

import { ScheduleComponent, HeaderRowDirective, HeaderRowsDirective, TimelineMonth, Inject, ViewsDirective, ViewDirective, DragAndDrop, Resize } from '@syncfusion/ej2-react-schedule';
import './Timeline.css';

export default function Timeline() {
    return (
        <div className='timeline'>
            <ScheduleComponent width='100%' height='100%' allowDragAndDrop={true}>
                <HeaderRowsDirective>
                    <HeaderRowDirective option='Month'/>
                    <HeaderRowDirective option='Date'/>
                </HeaderRowsDirective>
                <ViewsDirective>
                    <ViewDirective option='TimelineMonth' interval={12}/>
                </ViewsDirective>
                <Inject services={[TimelineMonth, Resize, DragAndDrop]}/>
            </ScheduleComponent>
        </div>
    );
}

I've tried className. I've also tried to inspect the elements and get their name, and then use their name in the css file too but nothing works

Greetings from Syncfusion Support.

We have validated your requirement at our end and prepared a sample based on that by making use of the below CSS and code snippets.

CSS:

.e-schedule .e-schedule-toolbar .e-toolbar-items.e-tbar-pos,
.e-schedule .e-timeline-month-view .e-header-month-cell,
.e-schedule .e-timeline-month-view .e-header-week-cell,
.e-schedule .e-timeline-month-view .e-header-cells,
.e-schedule .e-timeline-month-view .e-work-cells  {
    background-color: #ffd9df !important;
}

.e-schedule .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn,
.e-schedule .e-timeline-month-view .e-work-cells.custom {
    background-color: pink !important;
}

Index.js:

onHover(args) {
  if (args.element.classList.contains('e-work-cells')) {
    let workCells = document.querySelectorAll(".e-work-cells");
    [].forEach.call(workCells, function (ele) {
      ele.classList.remove("custom");
    });
    args.element.classList.add('custom');
  }
}

Sample: https://stackblitz.com/edit/react-header-rows-material-theme-1rcxrc?file=index.js

And also let you know that we can change the scheduler UI by using the themes. We have prepared the samples with fabric and high-contrast theme for your reference that can be viewed from the below links.

Fabric theme: https://stackblitz.com/edit/react-header-rows-fabric-theme-ygtrxs?file=index.html High contrast theme: https://stackblitz.com/edit/react-header-rows-highcontrast-theme?file=index.html UG: https://ej2.syncfusion.com/react/documentation/appearance/theme/#theming

Kindly refer to the above links and let us know if you need further assistance.