How to change Gatsby website direction to RTL?-CodePudding

I'm new to Gatsby.js and I was wondering how to change the direction to RTL. I couldn't find the main index.html. I'm sure there is a way, but I found nothing in the documentation.

CodePudding user response：

You won't find exactly "how to change website direction in Gatsby" because, as any other web framework, this kind of customization belongs to CSS (or other preprocessed files such as SCSS).

You can find extensive documentation about built-in styling support at: https://www.gatsbyjs.com/docs/how-to/styling/built-in-css/

You must not customize the index.html (which is placed in the public folder) because it is generated in each build, so if you change something in it, as soon as you build your site again, your changes will be lost.

Your best chance is using global styles, which you can also find documentation at: https://www.gatsbyjs.com/docs/creating-global-styles/

For example:

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

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

And in your layout.css:

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