Material-UI - 支持 babel-plugin-react-css-modules 和 rtl app答案

【问题标题】：Material-UI - Support babel-plugin-react-css-modules and rtl appMaterial-UI - 支持 babel-plugin-react-css-modules 和 rtl app
【发布时间】：2020-05-02 08:47:42
【问题描述】：

material-ui：v4.8.2
反应：v16.12.0

babel-plugin-react-css-modules 与 rtl 应用程序 - 我想使用 injectFirst 但后来我收到警告： Material-UI: you cannot use the jss and injectFirst props at the same time.

我的猜测是我应该对 jss 进行不同的定义，这样它才能支持 rtl 和 css 模块。

// Configure JSS - How should I add here the css-modules styles?
const jss = create({ plugins: [...jssPreset().plugins, rtl()] });

对于 rtl 我应该这样做：

// Configure JSS
const jss = create({ plugins: [...jssPreset().plugins, rtl()] });

<StylesProvider jss={jss}>
            <ThemeProvider theme={theme}>
                <AppContainer />
            </ThemeProvider>);
        </StylesProvider>

对于 css-modules 样式我应该这样做：

<StylesProvider injectFirst>
            <ThemeProvider theme={theme}>
                <AppContainer />
            </ThemeProvider>);
        </StylesProvider>

谁能告诉我应该如何将两者结合起来？

【问题讨论】：

标签： reactjs material-ui jss react-css-modules babel-plugin-react-css-modules

【解决方案1】：

终于解决了。

执行以下操作：

在<head>下方添加jss-insertion-point

<head>
     <!-- jss-insertion-point -->
     ...
</head>

Root.js：

    import rtl from 'jss-rtl';
    import { StylesProvider, jssPreset } from '@material-ui/core/styles';

    let jss = create({
      plugins: [...jssPreset().plugins, rtl()],
      insertionPoint: 'jss-insertion-point',
    });

    const Root = () => (
       <Provider store={store}>
           <StylesProvider jss={jss}>
               <ThemeProvider theme={theme}>
                    <Router history={history} routes={routes}/>
               </ThemeProvider>);
           </StylesProvider>
       </Provider>
    );

export default Root;

【讨论】：