Estoy tratando de usar varios idiomas en mi proyecto nextjs y en la biblioteca MUI, y estoy configurando el elemento de mi cuerpo de la dirección de mi proyecto usando la configuración regional.
const App = (props: MyAppProps) => { const { Component, emotionCache = clientSideEmotionCache, pageProps, } = props; const router = useRouter() const { locale } = router; return ( <CacheProvider value={emotionCache}> <ThemeProvider theme={getTheme(theme)}> <CssBaseline /> <GlobalStyles styles={{ body:{ backgroundColor:getTheme(theme).palette.Background.background, direction:locale==="fa"?"rtl":"ltr" } }}/> <Component {...pageProps} /> </ThemeProvider> </CacheProvider> ); };y eso funciona bien con la propiedad de alineación de texto, pero tengo un problema con el posicionamiento de mis elementos porque hay propiedades derecha, izquierda, inferior y superior en el posicionamiento, y no hay una propiedad de inicio y fin. por ejemplo:
width:50px; height:50px position: relative; left:2pxmi elemento con la posición anterior, quiero colocar 2 píxeles desde la izquierda en el idioma direccional RTL como el persa pero quiero colocarlo 2 píxeles desde la derecha en el idioma direccional LTR como el idioma inglés. por lo general, se hace con las propiedades de inicio y final, pero en css no lo sé porque no hay nada parecido en la propiedad de posición. Entonces, mi pregunta es ¿cómo puedo colocar la base de elementos de inicio y final?
mostrar Ponga su elemento en modo flexible y use las capacidades de justificar contenido, .... vaya a ingresar la descripción del enlace aquí
No puedo entender su código, pero la pregunta está relacionada con CSS, por eso le estoy dando una idea. Vamos a tener un elemento <div id="element" class="{{ direction:locale==='fa'?'rtl':'ltr' }}">Your contents</div>
Ahora, pon este css en tu página de estilo->
#element.rtl { left: 2px; } #element.ltr { right: 2px; }Espero que esto te ayudará. Si no, comenta aquí.
Debe establecer la posición relativa al elemento div y la posición derecha o izquierda al elemento div anidado.
Estructura tu HTML similar a esto:
<div id="container"> <div class="top left"></div> <div class="top right"></div> </div>CSS
#container { position: relative; } #container > * { position: absolute; } .left { left: 2px; } .right { right: 2px; }