css - React Material-UI 自包含应用程序 CSS 样式

Question

我使用 CssBaseline 组件和 jss 组件样式开发了一个 React / Material UI 应用程序，例如：

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",
    },
});

和 withStyles() 我认为它使应用程序样式是独立的（即会忽略应用程序托管页面上的任何其他样式）。

但是，既然我的任务是将新应用程序嵌入到现有应用程序的页面中，我注意到现有应用程序样式有时会渗透到新的 React / Material UI 应用程序中（即标签颜色是现有应用程序颜色而不是比 Material UI 颜色）。

• 这些是 CssBaseline 组件中的错误吗？
• 如何更新新应用程序以防止旧样式影响它？

作为参考，我的 App 组件如下所示：

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>
        );
    }
}

标签： cssreactjsmaterial-ui