Including SyncFusion CSS (unintentionally) overwrites Material UI Themes

[Shan Du]

Hi there,

It seems that some SyncFusion CSS are overwriting certain Material UI styles/themes cross the whole site (screenshots attached below).

We are using Material UI and SyncFusion Scheduler, & here's the SyncFusion CSS that's included, based on this guide here: https://ej2.syncfusion.com/react/documentation/schedule/getting-started/.

import '@syncfusion/ej2-base/styles/material.css'

import '@syncfusion/ej2-buttons/styles/material.css'

import '@syncfusion/ej2-calendars/styles/material.css'

import '@syncfusion/ej2-dropdowns/styles/material.css'

import '@syncfusion/ej2-inputs/styles/material.css'

import '@syncfusion/ej2-navigations/styles/material.css'

import '@syncfusion/ej2-popups/styles/material.css'

import '@syncfusion/ej2-react-schedule/styles/material.css'

Before adding SyncFusion CSS:

After adding SyncFusion CSS:

The above is just ONE example of Material UI themes being overwritten, there could be others I haven't discovered. How to properly address this so that NO other Material UI elements are affected?

[Vengatesh Maniraj]

Hi Shan,

Currently, we are checking on this and get back to you with further details tomorrow(Mar 08).

Regards,

Vengatesh

[Shan Du]

Fantastic, thank you!!

BTW, we are using Material UI v4 in a Single-Page web app

Here's more code for our setup, hopefully can help you troubleshoot, basically our own theme here is the one being overwritten somehow.

import React from 'react'

import ReactDOM from 'react-dom'

import { BrowserRouter } from 'react-router-dom'

import { MuiThemeProvider as ThemeProvider, createTheme } from '@material-ui/core/styles'

import App from './App'

import { createTheme } from '@material-ui/core/styles'

// Our customized theme (simplified), some of these are overwritten

const Theme = createTheme({

palette: {

primary: {

light: '#C6DCF7',

main: '#1994FC',

dark: '#243866',

},

secondary: {

light: '#F2F5FA',

main: '#CDD3DA',

dark: '#485057',

},

},

})

ReactDOM.render(

<BrowserRouter>

<ThemeProvider theme={Theme}>

<App />

ThemeProvider>

BrowserRouter>,

document.getElementById('root'),

)

[Balasubramanian Sattanathan]

Hi Shan,

We have tried to replicate the issue at our end by preparing the sample based on your code snippet. But unfortunately, we couldn't complete the sample due to missed reference files. So, can you please share the issue replication sample or replicate the issue in the below sample which will be very helpful to validate the issue and provide a prompt solution at the earliest.

Sample: https://stackblitz.com/edit/add-remove-resource-szb6vy?file=index.js

Regards,
Balasubramanian S

[Shan Du]

Hi there, thank you for responding, after debugging myself, I realize that it was actually NOT caused by SyncFusion, it was due to the usage of `renderToString`.

See code snippet example here: https://codesandbox.io/s/mui-theme-test-forked-e3uqpe?file=/src/index.js

But now I have new question because of this

So I need to customize the "Today" button in the Scheduler header to make it use Material UI button so that it's consistent with the rest of the site, but `item.template` only accepts HTML string, so I had to use `renderToString` to convert it to string first, but using `renderToString` would reset the custom theme (you can try it in the code snippet above), do you know any other way to do this?

[Balasubramanian Sattanathan]

We let you know that the item.template property will support only the HTML element or element ID as a string. Kindly refer to the below sample.

Sample: https://stackblitz.com/edit/react-7eksnm