reactjs - Material-UI:flip:false 无法按预期工作

Question

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

我设置了according to the docs一切似乎都有效。 MUI 组件会自动翻转。但是，我们仍然需要一些组件不被翻转并与 ltr 正常工作。我尝试使用翻转:false 属性 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。但是，它只会像文档示例中那样更改 text-align 。我不确定这是否应该起作用，这是一个错误，或者是否有办法实现这一目标。我还没有在网上找到任何关于如何翻转组件的特定部分的示例，而不仅仅是将整个组件覆盖到 ltr 并禁用 jss-rtl。

在此先感谢您的帮助!

编辑:添加了 demo .

Answer 1

我将此作为 issue 提交为 Material-UI 并得到了答复。 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 的组件:ltr，以及一个带有 dir='ltr' 的 div。