TextInput 上的 RTL 适用于所有其他渲染
RTL on TextInput works on every other render
我在 RTL 方面遇到了一个奇怪的问题,除了 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>
)
}
大胆猜测:尝试添加一次 jssRtl
pugin。您要在 Theme
组件的每个渲染器上添加 jssRtl
插件。这可能解释了它不会在 50% 的时间内工作,因为每个偶数渲染都意味着翻转两次,这相当于不翻转。
我在 RTL 方面遇到了一个奇怪的问题,除了 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>
)
}
大胆猜测:尝试添加一次 jssRtl
pugin。您要在 Theme
组件的每个渲染器上添加 jssRtl
插件。这可能解释了它不会在 50% 的时间内工作,因为每个偶数渲染都意味着翻转两次,这相当于不翻转。