如何将 Gatsby 网站方向更改为 RTL？

Question

我是 Gatsby.js 的新手，我想知道如何将方向更改为 RTL。我找不到主要 index.html。我确定有办法，但我在文档中找不到任何东西。

Answer 1

您不会确切地找到“如何在 Gatsby 中更改网站方向”，因为与任何其他 Web 框架一样，这种自定义属于 CSS（或其他预处理文件，例如 SCSS).

您可以在以下位置找到有关内置样式支持的大量文档：https://www.gatsbyjs.com/docs/how-to/styling/built-in-css/

您不能自定义 index.html（位于 public 文件夹中），因为它是在每次构建时生成的，所以如果您更改其中的某些内容，一旦构建您的重新访问站点，您的更改将会丢失。

你最好的机会是使用全局样式，你也可以在以下位置找到文档：https://www.gatsbyjs.com/docs/creating-global-styles/

例如：

import React from "react"
import "./layout.css"

export default function Layout({ children }) {
  return <div>{children}</div>
}

在你的 layout.css 中：

div {
  background: red;
  color: white;
  direction: rtl;
}

How to change Gatsby website direction to RTL?