0
199
VistasNo se pueden alinear los componentes de la interfaz de usuario del material de derecha a izquierda
Hola, tengo un sitio web que admite inglés y árabe. Quiero alinear los campos de texto y los menús desplegables de MUI de derecha a izquierda, principalmente la etiqueta del texto archivado y los menús desplegables no tienen el estilo adecuado. Estoy usando el tema que se indica a continuación.
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, }) y en App.js mi componente devuelto es
<div> <ThemeProvider theme={theme}> {myComponentCode} </ThemeProvider> </div>También quiero mencionar que funciona bien para Firefox pero no para Google Chrome.
No está colocando la etiqueta de archivo de texto correctamente en Chrome, la quiero en la parte superior derecha con un espacio vacío en la parte posterior.
1 Respuestas
Responde la pregunta0
Debe instalar un complemento adicional ( stylis-plugin-rtl para MUI v5 o jss-rtl para MUI v4) y colocarlo dentro de su <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> )Interfaz de usuario material 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> );