Javascript TextInput上的RTL在每一次渲染中都起作用
我对RTL有一个奇怪的问题,除了Javascript TextInput上的RTL在每一次渲染中都起作用,javascript,reactjs,material-ui,right-to-left,Javascript,Reactjs,Material Ui,Right To Left,我对RTL有一个奇怪的问题,除了TextInput,似乎所有的东西都被正确地翻转了,这在50%的时间里都能正常工作。下面是一个gif,显示了我在英语和希伯来语之间切换语言时出现的问题: (单击以获取更大的图像) 这是我将树包装在其中的主题组件 import React, {useContext} from 'react' import {create} from 'jss' import jssRtl from 'jss-rtl' import JssProvider from 'react-
TextInput
,似乎所有的东西都被正确地翻转了,这在50%的时间里都能正常工作。下面是一个gif,显示了我在英语和希伯来语之间切换语言时出现的问题:
(单击以获取更大的图像)
这是我将树包装在其中的主题组件
import React, {useContext} from 'react'
import {create} from 'jss'
import jssRtl from 'jss-rtl'
import JssProvider from 'react-jss/lib/JssProvider'
import {
createGenerateClassName,
jssPreset,
MuiThemeProvider,
createMuiTheme
} from '@material-ui/core/styles'
import CssBaseline from '@material-ui/core/CssBaseline'
import {UserContext} from 'src/context/user.js'
const generateClassName = createGenerateClassName()
const plugins = [...jssPreset().plugins]
const dir = locale => {
const base = locale.split('-') || []
return ['he', 'ar'].includes(base[0]) ? 'rtl' : 'ltr'
}
const setDir = dir => {
window.document &&
window.document.getElementsByTagName('body')[0].setAttribute('dir', dir)
}
export default function Theme({children}) {
const {locale} = useContext(UserContext)
const direction = dir(locale)
const theme = createMuiTheme({direction, useNextVariants: true})
if (direction === 'rtl') plugins.push(jssRtl())
setDir(direction)
console.log('theme', {locale, direction})
return (
<MuiThemeProvider theme={theme}>
<CssBaseline />
{direction === 'rtl' ? (
<JssProvider
jss={create({plugins})}
generateClassName={generateClassName}
>
{children}
</JssProvider>
) : (
children
)}
</MuiThemeProvider>
)
}
import React,{useContext}来自“React”
从“jss”导入{create}
从“jss rtl”导入jssRtl
从“react jss/lib/JssProvider”导入JssProvider
进口{
createGenerateClassName,
jssPreset,
音乐提供者,
创造博物馆
}来自“@material ui/core/styles”
从“@material ui/core/CssBaseline”导入CssBaseline
从'src/context/user.js'导入{UserContext}
const generateClassName=createGenerateClassName()
const plugins=[…jssPreset().plugins]
const dir=locale=>{
const base=locale.split('-')||[]
返回['he','ar']。包括(基[0])?'rtl':'ltr'
}
const setDir=dir=>{
窗口文件&&
window.document.getElementsByTagName('body')[0].setAttribute('dir',dir)
}
导出默认函数主题({children}){
const{locale}=useContext(UserContext)
const direction=dir(区域设置)
const theme=createMuiTheme({direction,useNextVariants:true})
if(direction=='rtl')plugins.push(jssRtl())
setDir(方向)
log('theme',{locale,direction})
返回(
{方向==='rtl'(
{儿童}
) : (
儿童
)}
)
}
胡乱猜测:尝试添加一次jssRtl
pugin。您正在主题
组件的每个渲染上添加jssRtl
插件。这也许可以解释,它在50%的时间内都无法工作,因为每次偶数渲染都意味着翻转两次,这相当于不翻转