3

I have developed a React / Material UI application using the CssBaseline component and jss component styling like:

const styles = (theme: Theme) => ({
    "appBar": {
        "zIndex": theme.zIndex.appBar,
    },
    "buttonContainer": {
        "marginRight": theme.spacing.unit
    },
    "leftBar": {
        "alignItems": "center",
        "display": "flex",
        "flexGrow": 1,
    },
    "logo": {
        "display": "inline-block",
        "height": 30,
        "marginRight": theme.spacing.unit,
        "width": 30,
    },
    "rightBar": {
        "alignItems": "center",
        "display": "flex",
        "flexGrow": 1,
        "justifyContent": "flex-end",
    },
});

and withStyles() which I thought made the application styling be self-contained (i.e. would ignore any other styling on the app hosting page).

However now that I've been tasked with embedding the new application into a page within an existing application, I have noticed that the existing application styles sometimes penetrate into the new React / Material UI application (i.e. a tag colors being the existing app color rather than the Material UI color).

  • Are these bugs in the CssBaseline component?
  • How do I update the new application to keep the old styles from affecting it?

For reference my App component looks like this:

export class App extends PureComponent {
    public render(): JSX.Element {
        return (
            <Provider store={ReduxStore}>
                <OidcProvider store={ReduxStore} userManager={AuthUserManager}>
                    <BrowserRouter basename={AppConfig.pageUrl}>
                        <MuiThemeProvider theme={theme}>
                            <MuiPickersUtilsProvider utils={LuxonUtils}>
                                <CssBaseline />
                                <AppLayout />
                            </MuiPickersUtilsProvider>
                        </MuiThemeProvider>
                    </BrowserRouter>
                </OidcProvider>
            </Provider>
        );
    }
}
IdeoclickVanessa
  • 31
  • 3
  • There's no bug here. Your problem is an ancient CSS problem, it doesn't really relate to React or Material-UI at all. Here's a random old question with some ideas: https://stackoverflow.com/q/15901030/405015 – thirtydot Feb 20 '19 at 23:10
  • hmmz.... couldn't the CssBaseline component implement this answer: https://stackoverflow.com/a/36256886/11092754 from the thread you listed rather than forcing each Material-UI user to implement it? – IdeoclickVanessa Feb 21 '19 at 15:16
  • It could, but it's simply not the responsibility of `` (or Material-UI) to do that. Most users aren't embedding their React/Material-UI application in an existing site which is using "leaky" CSS. Some users might _want_ the parent CSS to "leak" in, for example `font-family` is often specified only on `body` and you want it to be inherited everywhere. – thirtydot Feb 21 '19 at 19:01
  • Let me know if you want a full answer written for this question. – thirtydot Feb 21 '19 at 19:06
  • @thirtydot I can't seem to get the `all: revert` in the correct spot where it also doesn't wipe out the Material UI styles; therefore, I would be interested in a more complete answer that you offered. – IdeoclickVanessa Feb 25 '19 at 15:47
  • 1
    I tried to write an answer, but it's actually incredibly annoying to write a good, generic answer for this. What you should do depends a lot on what the parent site's CSS is doing! `all: revert` has [terrible browser support](https://caniuse.com/css-revert-value), it's not currently a solution. `all: unset`/`all: initial` have decent support, but are not too useful here. Sticking your new app in an `iframe` is a simple fix, but has downsides. The most generic advice I can give is: override each instance of problematic CSS coming from the parent site on a case-by-case basis in your new app. – thirtydot Feb 26 '19 at 00:53

0 Answers0