Material-Ui TextField不受RTL方向的影响 [英] Material-Ui TextField not affected with the RTL direction

问题描述

我在我的React项目中使用Material-Ui！

我遵循了

RTL方向

就像你看到的一样！问题在于标签仍在左侧(输入文本工作正常)

App.js文件

 从'react'导入React，{useState};//i18n从"react-i18next"导入{withTranslation}；导入'./i18n';//jss从'jss'导入{创建}；从'jss-rtl'导入rtl;从'@ material-ui/core/styles'导入{StylesProvider，jssPreset};//配置JSSconst jss = create({插件:[... jssPreset().plugins，rtl()]});功能App(props){//初始化语言const {i18n} =道具；const [prefLang，setPrefLang] = useState(i18n.language);让主题= createMuiTheme({调色板:{基本的 : {main:'#ed5ac0'，}，}，版式:{fontFamily:"lalezar，草书"，h3:{fontSize:1.4，}，h4:{字体大小:1.5}，fontAwseomeSize:{xs:"14px"，sm:"14px"，md:"16px"；}，响应字体:{xs:"20px"，sm:"12.5px"，md:"14px"；}，强调 : {md:"25px"}，subHighLight:{md:"18px"；}}，});返回 (< BrowserRouter>< LangContext.Provider值= {{prefLang，setPrefLang}}>< CssBaseline/>< ThemeProvider theme = {theme}>< StylesProvider jss = {jss}>< Grid dir = {(prefLang ==="ar"))吗?rtl":" ltr"}>{/**/}< ContentRouter/></Grid></StylesProvider></ThemeProvider></LangContext.Provider></BrowserRouter>);}使用Translation()(App)导出默认值; 

我的表单组件

  const LoginForm =()=>{返回 (<><背景样式= {{zIndex:999，颜色:theme.palette.primary.main}} open = {背景}>< CircularProgress color =继承"；/></背景>< form onSubmit = {formik.handleSubmit} style = {{width:"100％"，marginTop:"20px"}}>{userNotFound吗?<警报样式= {{marginBottom:"20px"}}} variant =概述"；严重性＝错误".这是一个错误警报-检查一下！</警报>: 空值}< TextFieldid ="identifier"名称=标识符"onChange={formik.handleChange}值= {formik.values.identifier}标签= {t('formIdentifier')}全屏宽度/>{formik.touched.identifier&formik.errors.identifier吗?(<警报样式= {{marginTop:"10px"}}变体=概述"；严重性＝错误"＞ {formik.errors.identifier}//Alert.) : 空值}< TextField样式= {{marginTop:" 50px"}}id ="password"名称=密码"；type ="password"onChange = {formik.handleChange}值= {formik.values.password}标签= {t('formPassword')}全屏宽度/>{formik.touched.password&&formik.errors.password吗?(<警报样式= {{marginTop:"10px"}}变体=概述"；严重性=错误"> {formik.errors.password}</Alert>) : 空值}<按钮类型=提交"；color="primary">{t('login')}</Button></form></>);}; 

我的Theme.js文件

 从"@ material-ui/core/styles/createMuiTheme"导入createMuiTheme；让主题= createMuiTheme({方向:"rtl"，调色板:{基本的 : {main:'#ed5ac0'，}，}，版式:{fontFamily:"Merienda One，无衬线"，h3:{fontSize:1.4，}，h4:{字体大小:1.5}，fontAwseomeSize:{xs : "14px",sm:"14px"，md:"16px"；}，响应字体:{xs:"20px"，sm:"12.5px"，md:"14px"；}，强调 : {md:"40px"；}}，} 

);

导出默认主题；

是否有任何建议将标签设为RTL?

解决方案

此外，我在后面的答案中讨论了翻转图标:documentation to allow RTL in my project and all work fine !

except the TextField Component

LTR DIRECTION :

RTL DIRECTION

Like you see ! the problem is with the label still in left ( the input text work fine )

App.js file

import React, {useState} from 'react';


//i18n
import {withTranslation} from "react-i18next";
import './i18n';

//jss
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()] });




  function App(props) {

      // initialize Language
      const {  i18n } = props;
      const [ prefLang, setPrefLang] = useState(i18n.language);
      let theme =createMuiTheme({
        palette : {
            primary : {
                main : '#ed5ac0',
            },

        },
        typography : {
            fontFamily : "lalezar, cursive",
            h3 : {
                fontSize : 1.4,
            },
            h4 : {
                fontSize : 1.5
            },
            fontAwseomeSize : {
                xs : "14px",
                sm : "14px",
                md : "16px"
            },
            responsiveFont : {
                xs : "20px",
                sm : "12.5px",
                md : "14px"
            },
            highLight : {
                md : "25px"
            },
            subHighLight : {
                md : "18px"
            }
        },

    }
);



return (
          <BrowserRouter>
            <LangContext.Provider
                value ={{
                    prefLang,
                    setPrefLang
                }}
            >
                <CssBaseline/>
                <ThemeProvider theme={theme}>
                    <StylesProvider jss={jss}>
                        <Grid dir={(prefLang === "ar") ? "rtl" : "ltr"}>
                            {/*<AppHeader/>*/}


                            <ContentRouter/>


                        </Grid>
                    </StylesProvider>
                </ThemeProvider>


            </LangContext.Provider>

          </BrowserRouter>
      );
    }

   export default withTranslation()(App);

My Form Component

const LoginForm = () => {

 return (
    <>
        <Backdrop style={{ zIndex : 999 , color : theme.palette.primary.main}} open={backdrop} >
            <CircularProgress color="inherit" />
        </Backdrop>
        <form onSubmit={formik.handleSubmit} style={{width: "100%", marginTop: "20px"}}>

            { userNotFound ? <Alert style={{marginBottom : "20px"}} variant="outlined" severity="error">
                This is an error alert — check it out!
            </Alert> : null}
            <TextField
                id="identifier"
                name="identifier"
                onChange={formik.handleChange}
                value={formik.values.identifier}
                label={t('formIdentifier')}
                fullWidth
            />
            {formik.touched.identifier && formik.errors.identifier ?
                (
                    <Alert style={{ marginTop :"10px"}} variant="outlined" severity="error">{formik.errors.identifier}</Alert>

                ) : null}
            <TextField
                style={{marginTop: "50px"}}
                id="password"
                name="password"
                type="password"
                onChange={formik.handleChange}
                value={formik.values.password}
                label={t('formPassword')}
                fullWidth
            />
            {formik.touched.password && formik.errors.password ?
                (
                    <Alert style={{ marginTop :"10px"}} variant="outlined" severity="error">{formik.errors.password}</Alert>

                ) : null}
            <Button type="submit" color="primary">{t('login')}</Button>
        </form>
    </>
     );
  };

My Theme.js File

import createMuiTheme from "@material-ui/core/styles/createMuiTheme";

let theme =createMuiTheme({

    direction : 'rtl',
    palette : {
        primary : {
            main : '#ed5ac0',
        },

    },
    typography : {
        fontFamily : "Merienda One, sans-serif",
        h3 : {
            fontSize : 1.4,
        },
        h4 : {
            fontSize : 1.5
        },
        fontAwseomeSize : {
            xs : "14px",
            sm : "14px",
            md : "16px"
        },
        responsiveFont : {
            xs : "20px",
            sm : "12.5px",
            md : "14px"
        },
        highLight : {
            md : "40px"
        }
    },

}

);

export default theme;

Any suggestion to make the label RTL ?

解决方案

The documentation you linked to contains three steps for rtl support:

1. Set the dir attribute on the body element.

In my example below, this is handled by the following:

  React.useLayoutEffect(() => {
    document.body.setAttribute("dir", isRtl ? "rtl" : "ltr");
  }, [isRtl]);

2. Set the direction in the theme.

In my example below, I am toggling between two themes:

const ltrTheme = createMuiTheme({ direction: "ltr" });
const rtlTheme = createMuiTheme({ direction: "rtl" });
...
<ThemeProvider theme={isRtl ? rtlTheme : ltrTheme}>
...
</ThemeProvider>

3. Install the jss-rtl plugin.

For performance reasons it is important to avoid re-rendering StylesProvider, so this should not be in a component with state that can change and therefore trigger a re-render. In my own app, I have the StylesProvider element in my index.js file as the first element inside the call to react-dom render.

import rtl from "jss-rtl";
import {
  StylesProvider,
  jssPreset
} from "@material-ui/core/styles";
// Configure JSS
const jss = create({ plugins: [...jssPreset().plugins, rtl()] });
export default function App() {
  return (
    <StylesProvider jss={jss}>
      <AppContent />
    </StylesProvider>
  );
}

The example below includes a TextField and you can see that the label's position toggles correctly.

import React from "react";
import { create } from "jss";
import rtl from "jss-rtl";
import {
  StylesProvider,
  jssPreset,
  ThemeProvider,
  createMuiTheme
} from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
import Box from "@material-ui/core/Box";

// Configure JSS
const jss = create({ plugins: [...jssPreset().plugins, rtl()] });

const ltrTheme = createMuiTheme({ direction: "ltr" });
const rtlTheme = createMuiTheme({ direction: "rtl" });

function AppContent() {
  const [isRtl, setIsRtl] = React.useState(false);
  React.useLayoutEffect(() => {
    document.body.setAttribute("dir", isRtl ? "rtl" : "ltr");
  }, [isRtl]);
  return (
    <ThemeProvider theme={isRtl ? rtlTheme : ltrTheme}>
      <CssBaseline />
      <Box m={2}>
        <TextField label={isRtl ? "بريد الكتروني او هاتف" : "Email or Phone"} />
        <br />
        <br />
        Current Direction: {isRtl ? "rtl" : "ltr"}
        <br />
        <Button onClick={() => setIsRtl(!isRtl)}>Toggle direction</Button>
      </Box>
    </ThemeProvider>
  );
}
export default function App() {
  return (
    <StylesProvider jss={jss}>
      <AppContent />
    </StylesProvider>
  );
}

In addition, I have a later answer that discusses flipping icons: material-ui icons won't flip when I change to RTL.

这篇关于Material-Ui TextField不受RTL方向的影响的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！