Material-UI：翻转：假没有按预期工作答案

【问题标题】：Material-UI: flip:false doesn't work as expectedMaterial-UI：翻转：假没有按预期工作
【发布时间】：2019-08-05 03:13:28
【问题描述】：

我是 Material-UI 和 jss 的新手，并将它们添加到从右到左的项目中。

我设置了according to the docs，一切似乎都正常。 MUI 组件会自动翻转。但是，我们仍然需要一些组件不被翻转并与 ltr 一起正常工作。我尝试使用翻转：错误属性seen here in the docs。它适用于普通 div 文档中的简单示例（将 text-align: right 翻转为 text-align: left）。如果我将翻转放在 MUI 组件上，它不会做任何事情。

const style = {
    affected: {
        textAlign: 'right'
    },
    unaffected: {
        textAlign: 'right',
        flip: false
    }
}

添加到组件的类

<div>
    <FormGroup>
        <FormControlLabel 
            control={
                <Switch 
                    color="primary"
                    className={classes.affected}
                />
            }
            label="Affected Switch"
            labelPlacement="start"
        />
    </FormGroup>
</div>

<div>
    <FormGroup>
        <FormControlLabel 
            control={
                <Switch 
                    color="primary"
                    className={classes.unaffected}
                />
            }
            label="Unaffected Switch"
            labelPlacement="start"
        />
    </FormGroup>
</div>

在上面的示例中，我希望这会呈现两个开关，在第一个开关上，x 轴上的样式被翻转为 ltr。但是，它只会像文档示例中那样更改文本对齐。我不确定这是否应该工作并且它是一个错误，或者是否有办法实现这一点。我在网上没有找到任何关于如何翻转组件特定部分的示例，而不仅仅是将整个组件覆盖到 ltr 并禁用 jss-rtl。

提前感谢您的帮助！

编辑：添加了demo。

【问题讨论】：

你能创建 stackblitz 来重现问题吗？
Here's a demo. 我确实认为我现在理解了这个问题，我认为 flip: false 仅适用于您编写它的 css 规则集，它不会改变任何其他内容。

标签： reactjs material-ui jss

【解决方案1】：

我将此作为 Material-UI 的 issue 提交并得到了答复。 Here's a demo 在那里实现了我想要的效果。

const ltrTheme = {
  ...theme,
  direction: 'ltr'
}

function Demo({classes}) {
  return (
    <FormGroup>
        <FormControlLabel
          control={
            <Switch color="primary"/>
          }
          label="RTL Switch"
        />
        <FormControlLabel
          control={
            <MuiThemeProvider theme={ltrTheme}>
              <div dir="ltr">
                <Switch color="primary"/>
              </div>
            </MuiThemeProvider>
          }
          label="LTR Switch"
        />
      </FormGroup>
  );
}

您所要做的就是用带有方向的新主题 LTR 和 dir='ltr' 的 div 包装您想要 LTR 的组件。

【讨论】：