无法从右到左对齐 material ui 组件
Not able to align the material ui components from right to left
您好,我有一个同时支持英语和阿拉伯语的网站,我想从右到左对齐 MUI 文本字段和下拉菜单,主要是文本字段的标签和下拉菜单的样式不正确。我正在使用下面列出的主题。
const theme = createTheme({
palette: {
primary: {
main: blue[500],
light: blue[100],
dark: blue[700]
},
secondary: {
main: blue[300]
},
success: {
main: green[400]
}
},
typography: {
"fontFamily": "Poppins",
},
overrides: {
MuiTypography: {
color: '#787878'
},
'& *': {
fontFamily: "Poppins",
},
},
direction: state.theme.direction,
})
在 App.js
中,我返回的组件是
<div>
<ThemeProvider theme={theme}>
{myComponentCode}
</ThemeProvider>
</div>
我还想提一下,它适用于 Firefox,但不适用于 Google Chrome。
它没有将文本字段标签正确地放置在 Chrome 上,我希望它位于右上角,后面为空 space。
您必须安装额外的插件(stylis-plugin-rtl for MUI v5 or jss-rtl for MUI v4)并将其放入您的 <ThemeProvider>
:
MUI v5:
import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";
const cacheRtl = createCache({
key: "muirtl",
stylisPlugins: [rtlPlugin]
});
...
return(
<ThemeProvider theme={theme}>
<CacheProvider value={cacheRtl}>
{children}
</CacheProvider>
</ThemeProvider>
)
Material UI v4
import { create } from 'jss';
import rtl from 'jss-rtl';
import { StylesProvider, jssPreset } from '@material-ui/core/styles';
// Configure JSS
const jss = create({ plugins: [...jssPreset().plugins, rtl()] });
...
return (
<ThemeProvider theme={theme}>
<StylesProvider jss={jss}>
{children}
</StylesProvider>
</ThemeProvider>
);
您好,我有一个同时支持英语和阿拉伯语的网站,我想从右到左对齐 MUI 文本字段和下拉菜单,主要是文本字段的标签和下拉菜单的样式不正确。我正在使用下面列出的主题。
const theme = createTheme({
palette: {
primary: {
main: blue[500],
light: blue[100],
dark: blue[700]
},
secondary: {
main: blue[300]
},
success: {
main: green[400]
}
},
typography: {
"fontFamily": "Poppins",
},
overrides: {
MuiTypography: {
color: '#787878'
},
'& *': {
fontFamily: "Poppins",
},
},
direction: state.theme.direction,
})
在 App.js
中,我返回的组件是
<div>
<ThemeProvider theme={theme}>
{myComponentCode}
</ThemeProvider>
</div>
我还想提一下,它适用于 Firefox,但不适用于 Google Chrome。
它没有将文本字段标签正确地放置在 Chrome 上,我希望它位于右上角,后面为空 space。
您必须安装额外的插件(stylis-plugin-rtl for MUI v5 or jss-rtl for MUI v4)并将其放入您的 <ThemeProvider>
:
MUI v5:
import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";
const cacheRtl = createCache({
key: "muirtl",
stylisPlugins: [rtlPlugin]
});
...
return(
<ThemeProvider theme={theme}>
<CacheProvider value={cacheRtl}>
{children}
</CacheProvider>
</ThemeProvider>
)
Material UI v4
import { create } from 'jss';
import rtl from 'jss-rtl';
import { StylesProvider, jssPreset } from '@material-ui/core/styles';
// Configure JSS
const jss = create({ plugins: [...jssPreset().plugins, rtl()] });
...
return (
<ThemeProvider theme={theme}>
<StylesProvider jss={jss}>
{children}
</StylesProvider>
</ThemeProvider>
);