Overriding the css styles causes complete override of all material-ui buttons in the app

[Tony Kimani]

Requirement : Apply custom styling to Timeline header

Issue : We are using material-ui and we notice that if we add this code to a component (gannt chart), it affects button material-ui styling.

Code :

So 1. We customise the timeline header with:

const styleTableHeader = (e: any) => {

    const l = e.cell.column.parent.dataSource.length;

    const startDate = e.cell.column.parent.dataSource[0].StartDate;

    const endDate = e.cell.column.parent.dataSource[l - 1].EndDate;

    const cell: Element = e.node as Element;

    ReactDOM.render(<TableHeader startDate={startDate} endDate={endDate} />, cell);

  };

 <GanttComponent

       ....

      headerCellInfo={styleTableHeader}

       ....

    >

      <ColumnsDirective>

        <ColumnDirective field="TaskName" headerText={headerText} width={317}></ColumnDirective>

      </ColumnsDirective>

      <Inject services={[Selection]} />

    </GanttComponent>

  );

and then we inject the declarations into the header:

<Helmet>

        <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />

        <style type="text/css">

          {`

            .e-header-cell-label {              

              color: '#black-87';

              margin-left: '50px';

            }

            .e-timeline-single-header-cell {

              text-align: center;

              padding-left: 8px;

            }

        `}

        </style>

      </Helmet>

[Gopinath Muniraj]

Hi Tony, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. As we have checked the Gantt component with rendering a button using material-ui. And we made some customization in CSS and it was working fine at out end. Here we are attaching a sample that we tested. Please get the sample from below link. 

Sample: https://stackblitz.com/edit/react-zpv3dj?file=index.html  

Please share us the following details. 

1. React version
2. Gantt package version
3. Screenshot of the issue
4. Error call stack if you are facing any console error.
5. An issue reproducible sample, or please modify the attached sample.

Please provide the above sample. It will be helpful for us to provide you with the proper solution as soon as possible. 

Thanks, 

Gopinath M