相关疑难解决方法(0)

我将应用程序Material-UI从版本 4 更新到版本 5，但 RTL 支持不再起作用。

我查看了文档并按照每个步骤进行操作：

https://mui.com/guides/right-to-left/

实际结果是应用程序仍然是 LTR（您可以查看TextField下面 Codesandbox 链接中的组件）。

预期结果是应用程序应该是 RTL。

尽管如此，RTL 支持仍然不起作用。

此外，我在以下位置创建了一个示例版本Codesandbox：

https://codesandbox.io/s/issue-with-rtl-in-material-ui-v5-jtii6?file=/src/index.js

我将感谢您帮助找出问题所在。

谢谢。

我已经使用Ryan Cogswell 的答案让我的项目与 RTL 兼容。

但由于某种原因，Material-ui 图标<Send/>没有相应翻转。是不是因为不兼容RTL？或者我错过了什么？

下面的示例显示“发送”图标不翻转：

import React from "react";\nimport { create } from "jss";\nimport rtl from "jss-rtl";\nimport {\n  StylesProvider,\n  jssPreset,\n  ThemeProvider,\n  createMuiTheme\n} from "@material-ui/core/styles";\nimport CssBaseline from "@material-ui/core/CssBaseline";\nimport TextField from "@material-ui/core/TextField";\nimport Button from "@material-ui/core/Button";\nimport Box from "@material-ui/core/Box";\nimport SendIcon from "@material-ui/icons/Send";\n\n// Configure JSS\nconst jss = create({ plugins: [...jssPreset().plugins, rtl()] });\n\nconst ltrTheme = createMuiTheme({ direction: "ltr" });\nconst rtlTheme = createMuiTheme({ direction: "rtl" });\n\nfunction AppContent() {\n  const [isRtl, setIsRtl] = React.useState(false);\n  React.useLayoutEffect(() => {\n …

我正在一个项目中使用 Material-UI，并且正在浏览他们的 API。

但是，我不明白OutlineInput组件notched中的属性

<FormControl variant='outlined'>
  <OutlinedInput notched={false} />
</FormControl>

将属性从 false切换notched为 true 不会在视觉上改变任何内容。

另外，由于我不是以英语为母语的人，我完全不明白它应该做什么。

我想禁用编译 MUI 时导出的所有浏览器规则:

所以我想看到：

{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    -webkit-box-align: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
}

这

{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

我找不到使用 MUI4 或 MUI5 执行此操作的方法。

成分

import React from 'react'
import { styled } from '@mui/material'
    
const ChildContainer = styled('div')`
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
`

export const TopNav: React.FC = ({ children, ...props }) => {
  return (
      <ChildContainer data-name="ChildContainer">{children}</ChildContainer> …