Look and feel problems encapsulating a ReactJS embedded application using Material ui

user_15276498 0
Viewed 114

I am embedding a ReactJS application using Material UI styled components inside a Wordpress page. I am using webpack for transpilation of the js.

I have produced the bundle of the embedded version of the application and I am importing and instantiating it in the following way

<script src="https://<domain url>/path/myapp.app.bundle.js"></script>
<script type="text/javascript">
  function loadApp() {
    window.MyApp("my-app-div");
  }
</script>

my-add-div corresponds to the id of the div where I want my application appears

Everything is working under the functional point of view.

My problem is related to the look and feel of the application that is influenced by the css of the wordpress theme.

I have tried to use the components CssBaseline and ScopedCssBaseline but the rendering seems to ignore them.

I have also tried those directives to reset the css styles but it did not work

#my-app-div {
all: initial; /* blocking inheritance for all properties */
}
#my-app-div * {
  all: unset; /* allowing inheritance within #my-app-div */
}

I have found a possibile solution prefixing all the css of the Material UI style component with the id of the my-app-div div, in this way the css of the styled component has more priority than the css coming from the wordpress theme. I have also found a plugin that could help in this but it is not compatible with the latest version of stylis https://www.npmjs.com/package/stylis-plugin-extra-scope

Does anyone has any suggestion to help me?

material-ui reactjs embed wordpress css
1 Answers

Have you tried adding a prefix to your material UI class for production build using the following approach.

import { createGenerateClassName, StylesProvider } from '@material-ui/core'

const generateClassName = createGenerateClassName({
      seed: 'xyz',
      productionPrefix: 'abc-',
    })

function App() {
  return (
    <StylesProvider generateClassName={generateClassName}>
         ...
    </StylesProvider>
  )
}
user_174975090
Related