Material-UI - Поддержка babel-plugin-реагировать - css -модули и приложение RTL - PullRequest
Новая
       29

Material-UI - Поддержка babel-plugin-реагировать - css -модули и приложение RTL

2 голосов
/ 15 января 2020

material-ui: v4.8.2
реагирует: v16.12.0

babel-plugin-реагировать- css -модули с приложением 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 -модулей, которые я должен сделать: 

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

Кто-нибудь может посоветовать, как мне объединить оба?

1 Ответ

2 голосов
/ 21 января 2020

Окончательно решил.

Выполните следующие действия:

Добавьте jss-insertion-point чуть ниже <head>

<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;
...