在MUI RTL方向使用边距或其他间距时遇到问题。例如,使用marginRight={'40px'}
时,在检查元素margin-left: 40px
中使用了左边距
我有一个问题时,使用边距或其他间距在mui rtl方向。
- 包. json**
{
"name": "mui",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite --port=4000",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@emotion/cache": "^11.10.5",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@mui/icons-material": "^5.11.0",
"@mui/material": "^5.11.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"stylis": "^4.1.3",
"stylis-plugin-rtl": "^2.1.1"
},
"devDependencies": {
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.9",
"@vitejs/plugin-react": "^3.0.0",
"vite": "^4.0.0"
}
}
- 主文件. jsx**
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import rtlPlugin from 'stylis-plugin-rtl';
import {prefixer} from 'stylis';
import createCache from '@emotion/cache';
import {CacheProvider} from '@emotion/react';
import {CssBaseline, ThemeProvider} from "@mui/material";
import theme from "./theme.js";
const cacheRtl = createCache({
key: 'muirtl',
stylisPlugins: [prefixer, rtlPlugin],
});
ReactDOM.createRoot(document.getElementById('root')).render(
<CacheProvider value={cacheRtl}>
<ThemeProvider theme={theme}>
<CssBaseline />
<App/>
</ThemeProvider>
</CacheProvider>
)
- 应用程序jsx**
import {Typography} from "@mui/material";
const App = () => {
return (
<div>
<Typography marginRight={'40px'}>another test</Typography>
</div>
)
}
export default App
- 主题. js**
import {createTheme} from "@mui/material";
const theme = createTheme({
direction: 'rtl'
})
export default theme
1条答案
按热度按时间yptwkmov1#
这是因为您要导入的stylis-plugin-rtl基于cssjanus。CSSJanus实际上只是交换“右”和“左”样式。例如,来自CSSJanus自述文件:
您可以在启用插件后根据需要交换左右的用法***或者**您可以使用
@noflip
指令处理sx
/marginRight
prop 中的异常。例如(undocumented forsx
*):工作代码沙盒:https://codesandbox.io/s/mui-rtl-no-flip-fy9fhi?file=/demo.js
对于设置样式的构件: