Material-UI - 支持 babel-plugin-react-css-modules 和 rtl app
Material-UI - Support babel-plugin-react-css-modules and rtl app
material-ui: v4.8.2
反应:v16.12.0
babel-plugin-react-css-modules with rtl app - 我想使用 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>
谁能告诉我应该如何将两者结合起来?
终于解决了
执行以下操作:
在 <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;
material-ui: v4.8.2
反应:v16.12.0
babel-plugin-react-css-modules with rtl app - 我想使用 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>
谁能告诉我应该如何将两者结合起来?
终于解决了
执行以下操作:
在 <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;