Javascript 如何对材质UI模板使用从右向左选项？

我是REACT新手，我正在用REACT创建一个应用程序，它将使用波斯语（从右到左的脚本，如阿拉伯语），我正在使用MaterialUI框架。问题是，我无法以rtl格式从MaterialUI获取组件。我遵循了以下步骤：

我的html标记中有rtl的方向。

我点击了rtl切换按钮并复制了所有代码，但粘贴后，组件并不是完全从右向左，部分从右向左

我遵循了他们网站上写的从右到左的指南，但我无法让jss库正常工作。

由于我是REACTJS新手，请有人详细说明如何使用这个JSSRTL

我附上一个表格，我想在rtl格式

从“React”导入React；
从“@material ui/core/Avatar”导入化身；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/CssBaseline”导入CssBaseline；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/FormControlLabel”导入FormControlLabel；
从“@material ui/core/Checkbox”导入复选框；
从“@material ui/core/Link”导入链接；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/Box”导入框；
从“@material ui/icons/LockOutlinedIcon”导入LockOutlinedIcon；
从“@material ui/core/Typography”导入排版；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Container”导入容器；
函数版权（）{
返回(
{'Copyright}
你的网站
{' '}
{新日期（）.getFullYear（）}
{'.'}
);
}
const useStyles=makeStyles（（主题）=>({
论文：{
marginTop：主题。间距（8），
显示：“flex”，
flexDirection:'列'，
对齐项目：“居中”，
},
化身：{
边距：主题。间距（1），
背景色：theme.palete.secondary.main，
},
表格：{
宽度：“100%”，//修复IE 11问题。
marginTop：主题。间距（1），
},
提交：{
边距：主题。间距（3,0,2），
},
}));
导出默认函数SignIn（）{
const classes=useStyles（）；
返回(
登录
登录
忘记密码了？
{“没有帐户？注册”}
);
}

---

**继续以LTR格式对所有元素进行编码

在index.js中，使用下面给出的代码：

从“React”导入React；
从“react dom”导入react dom；
从“@material ui/core/styles”导入{createMuiTheme}”；
从“@material ui/styles”导入{StylesProvider，ThemeProvider，jssPreset}；
从“jss”导入{create}；
从“jss rtl”导入rtl；
从“/Demo”导入演示；
const jss=create（{plugins:[…jssPreset（）.plugins，rtl（）]}）；
const theme=createMuiTheme({
方向：“rtl”
});
ReactDOM.render(
,
document.querySelector（“根”）
);