3

我正在使用语义 UI 库进行反应 https://react.semantic-ui.com/introduction。和 create-react-app 样板 https://github.com/facebook/create-react-app。我的应用需要 RTL 支持，尤其是对于 Step 组件。在研究解决方案时，我发现语义 ui 有一个配置文件 semantic.json，我可以在其中定义 RTL，但我不能将整个东西扭曲在一起。有人对此有任何建议或最佳做法吗？

4

3 回答 3

3

你可以用这个

.ui * {
    direction: rtl;
    text-align: right;
  }

于 2020-01-25T08:42:31.683 回答
2

RTL 支持是semantic-uiCSS 样式的一项功能，与semantic-ui-react. 如果您使用构建工具编译您自己的样式，semantic-ui然后在您的项目中使用这些样式，它们将起作用。

如果您不想编译自己的 RTL 样式，我相信这个 CDN 正在托管 CSS 的已编译 RTL 版本：

http://rtlcss.com/cdn/css-frameworks/semantic-ui/

于 2018-03-02T16:24:49.397 回答
2

如果您想使用semantic-ui（波斯语/阿拉伯语）等语言，您可以按照以下步骤操作reactjs。RTL

和 cdn

首先为 reactjs 安装语义 UI：

npm i semantic-ui-react

然后安装语义-ui css：

npm i semantic-ui-css

index.html现在在（仅 css）中包含语义 ui rtl

语义 UI RTL

<link
  rel="stylesheet"
  href="https://cdn.rtlcss.com/semantic-ui/2.4.1/semantic.rtl.min.css"
  integrity="sha384-yXUIpeQfH3cuk6u6Mwu8uyJXB2R3UOLvcha1343UCMA2TA7lQ14BFmrudI6LAP8A"
  crossorigin="anonymous">

没有 cdn （推荐）

如果你不想使用cdn，只需下载css 文件到这个路径：

node_modules/语义-ui-css/

把这个 css 放在这里，semantic.css 在哪里，然后包括这个：

import 'semantic-ui-css/semantic.rtl.min.css';

此方法经过测试并且已经正常工作，如果有人有问题，请随时发表评论，我会回复。

于 2020-02-05T07:29:51.463 回答