Question

我已经基于create-react-app构建了一个相当简单的React应用，该应用将Material-UI用于其界面组件。它还取决于我自己的一个程序包，该程序包还对两个共享组件使用Material-UI（相同版本）。

在我运行生产构建并部署它之前，本地情况一直很好。有些样式表现异常，例如Material-UI网格比本地运行时要窄得多。

我做了一些阅读，发现a few instances of people在我的场景下讨论了冲突的类名。这使我进入official Material-UI documentation，其中提供了以下示例代码以使用自定义类名称前缀：

import JssProvider from 'react-jss/lib/JssProvider';
import { createGenerateClassName } from '@material-ui/core/styles';

const generateClassName = createGenerateClassName({
  dangerouslyUseGlobalCSS: true,
  productionPrefix: 'c',
});

function App() {
  return (
    <JssProvider generateClassName={generateClassName}>
      ...
    </JssProvider>
  );
}

export default App;

在检查生产应用程序的源代码之前应用此修补程序之前，我可以使用CSS类DIV看到最外面的jss2 jss24。

应用此修复程序后，我的生产应用程序实际上在视觉上呈现与开发版本相同的布局，因此似乎已修复。但是，检查源代码显示最外面的DIV具有类MuiGrid-container-2 MuiGrid-spacing-xs-8-24，这对我来说是不对的。我可以这样保留它，但这确实意味着我正在使用未经优化的代码。

我在这里做错什么了吗？还是有其他解决方案？我正在使用@material-ui/core（3.3.2）的最新版本，而我的App.js的全部内容是：

import React, { Component } from 'react';
import { Provider } from "react-redux";
import { OidcProvider } from 'redux-oidc';
import JssProvider from 'react-jss/lib/JssProvider';
import Routes from './routes';
import store from './store';
import userManager from './utils/userManager';
import { 
    CustomUiTheme as Theme, 
    CustomUiLayout as Layout,
    CustomUiSnackbar as Snackbar,
    CustomUiModalAlert as Alert
} from 'custom-ui';
import Loading from './components/loading';
import { createGenerateClassName } from '@material-ui/core/styles';

const generateClassName = createGenerateClassName({
    dangerouslyUseGlobalCSS: true,
    productionPrefix: 'tw',
});

class App extends Component {
    render() {
        return (
            <JssProvider generateClassName={generateClassName}>
                <Provider store={store}>
                    <OidcProvider store={store} userManager={userManager}>
                        <Theme>
                            <Loading />
                            <Layout variant="xmas">
                                <Alert />
                                <Routes />
                                <Snackbar />
                            </Layout> 
                        </Theme>
                    </OidcProvider>
                </Provider>
            </JssProvider>
        );
    }
}

export default App;

Material-UI中的JssProvider并未将我的自定义生产前缀应用于CSS

0 个答案: