如何使用{flip：false}退出“ rtl”？

Question

我正在尝试实现与本link中的MUI文档相同的行为。通过从“ ltr”更改为“ rtl”，“受影响”将翻转，而“未受影响”将不会翻转。

我创建了一个demo，说明了在遵循documentation example来应用RTL的同时，按照steps所述使用{flip: false}的情况。

预期的行为：

1. “受影响”的div会翻转
2. “未受影响”的div不会像Switch组件那样翻转侧面
3. 嵌套主题和div中的“未受影响”将始终保持为“ ltr”

实际行为：

1. V-倒立并且应该
2. X-都是反面，不应该
3. V-保持“ ltr”状态

如何像嵌套主题＆div一样使用{flip: false}退出“ rtl”？

Answer 1

首先，有必要提到您需要使用left / right而不是start / end！ CSS的start和end足够聪明，您不需要使用额外的库来管理ltr / rtl切换。此外，使用jss-rtl的AFAIK不会对start / end值（不带或不带flip）产生任何影响。

但是为什么在上图中您会在右侧看到两个元素？这是因为使用了direction: "rtl"和"start"，并且是因为CSS规范（与jss-rtl和MUI不相关）。 在RTL方向上， start 表示 right ，而不是left！

---

在您的情况下，第二个重要说明实际上是 受影响的和不受影响的元素都未受影响（即使您更正了上述问题） ！ 因此，我们不能指望它会起到任何作用。

---

最后，我发现您需要将裸露的两个元素（受影响的和不受影响的 div s）导出到react组件中：< / strong>

function ReactComponent() {
  const classes = useStyles();

  return (
    <>
      <div className={classes.affected}>Affected</div>
      <div className={classes.unaffected}>Unaffected</div>
    </>
  )
}

并使用它代替它们：

叉子：https://codesandbox.io/s/material-demo-forked-9w61u?file=/demo.js

---

感谢@mustafahlvc his example on CodeSandbox。