Javascript 我如何选择退出'；rtl&x27；通过使用{flip:false}？

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

我创建了一个示例，演示如何使用

{flip:false}

，如中所述，同时遵循应用RTL的步骤

预期行为：

“受影响的”div将翻转到另一侧

“未受影响”div不会像交换机组件那样翻转

嵌套主题和div中的“未受影响”将始终保持为“ltr”

实际行为：

V-翻转侧边并应

X-两个都是反面，不应

V-保持“ltr”

---

我如何才能像嵌套主题和div那样使用

{flip:false}

退出“rtl”

首先，需要提到的是，您需要使用

左
/
右
而不是
开始
/
结束
！CSS的
start
和
end
足够智能，您不需要使用额外的库来管理ltr/rtl切换。此外，使用AFAIK不会对
开始
/
结束
值产生任何影响（w/或w/o
翻转
）


但是，为什么在上图中，您看到右侧的两个元素？这是因为使用了
方向：“rtl”
和
“start”
，并且是由于CSS规范（与和无关）。在RTL方向上，
开始表示
右，而不是
左


第二个重要的注意事项是，在您的情况下，受影响和未受影响的元素实际上都不受影响（即使您更正了上述问题）！
所以我们不能期望它有任何效果


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

函数组件（）{
const classes=useStyles（）；
返回(
影响
不受影响的
)
}

并使用它来代替它们：

叉子：


谢谢你