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.
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;
}
Related
Image will best describe this:
code sandbox:https://codesandbox.io/s/annoying-stylesheet-2gpejc?file=/public/index.html
I'm writing React app inside non react app and their styles interfere with my React app styles.
How do I overwrite bootstrap-enterprise.css stylesheet only for the region of my React app without overriding the style rest for the rest of the page (The top app bar is theirs)
Edit:
.App {
all: revert;
}
worked initially, but then I tried it my real usecase (overrding Mui Textfield styling component) and it didn't. i edited the codesandbox for the exact case.
Since your React app is separated from the rest of the app, you could use the all css property to reset all the styles inside your React app before to write yours :
/* Affect all the elements under .App */
.App * {
all: unset
}
In your codesandbox, adding it at the top of your styles.css seems to work fine.
I'm using gatsby.js with a styled component to develop my portfolio and when it doesn't render any CSS when I load my site the first time. However, it renders all CSS correctly when I refresh the page. What could be the reason?
This is my portfolio: https://haribhandari.me
The first time you open the link, the CSS will not load, however, if you refresh it will.
When using styled components, Gatsby on production may not render styles correctly. To fix that, follow those instructions:
Install following packages:
npm install gatsby-plugin-styled-components styled-components
babel-plugin-styled-components
Edit the gatsby-config.js
module.exports = {
plugins: [
{
resolve: `gatsby-plugin-styled-components`,
options: {
// Add any options here
},
},
],
}
More information are described in the documentation
A great way to let other's help you out is to provide some code snippets as it is hard to go through your site's code just in the browser tools.
I am not a gatsby expert and hope someone can help you understand the concept better. I would look into your <head> section.
<link as="script" rel="preload" href="/component---cache-caches-gatsby-plugin-offline-app-shell-js-ad6431e4664bcf916d19.js">
There is a similar topic regarding this issue here Gatsby v2 site does not load CSS properly
I also notice that your menu does not scroll to your projects section, you may want to take a look at that code as well.
Hope this helps
I am learning Gatsby. I have a component called Hero which is for displaying a banner for the blog I am building.
import React from 'react';
import styled from '#emotion/styled';
import { Link, graphql, useStaticQuery } from 'gatsby';
const ImageBackground = styled('div')`
background-image: url('images/plans-background.jpg'); <--- this url doesn't make sense to me
background-position: top 20% center;
background-size: cover;
/* background-color: red; */
`;
const Hero = () => {
return (
<ImageBackground>
<h1>Frontend Masster dsfsdfsd</h1>
<p>
hello
<Link to="/about">learn about me</Link>
</p>
</ImageBackground>
);
};
export default Hero;
I'm using the screenshot to show the folder structure
according to the structure, in order to reach the background image I need a url like this
`../../../static/images/plans-background.jpg`
And that's what the IDE prompted me to type when trying to reach the image file. However this url doesn't work as expected. There's no background image showing. and I changed it to
`images/plans-background.jpg`
The background image showed up magically.
So I don't understand why this url is working. Is it something special about the folder static or is Gatsby doing something behind the scene?
Also when I opened up the devtool to inspect the resources that got loaded, I didn't find this static file, neither the background image file.
I am really trying to understand how these pieces work together
Yes, this is the expected behavior for your assets in /static, read more about it in the docs: Using the Static Folder.
However, adding your images there is not a best practice because they won't be optimized with Gatsby's build time image processing and gatsby-image.
The docs also have good resources for this: Using Gatsby Image to Prevent Image Bloat, or Working with images in Gatsby.
I'm working with the Vuetify selector input component, v-select, and I want to custom style it. Since the component renders with only one v-select and no necessary children in the html, I turned to styling the component via inspecting in chrome and copying down the class there. For example, to change the font size of the active value, I used:
.v-select__selections {
font-size: 20px;
}
This worked fine, until I realized my styles in this manner did not work on any parts of the (normally hidden) navigation drawer. For example,
.v-menu__content {
height: 500px;
}
Would not impact the styles in any way. Bizarrely enough, it was not simply my styles getting overwritten by Vuetify styles (!important had no effect) - it appeared that my CSS didn't reach the components at all. There was no trace of any of my written styles upon inspect. How?
I believe this is due to the active-based nature of the drawer-part of the selector component. Is there another way I should be addressing those kinds of elements in CSS? I wish I could provide a Jsfiddle, but (on the templates I've found), Vuetify renders completely differently. I'm using Vuetify 1.1.7.
My styles are included directly in the component .vue file, non scoped. Vuetify and vuetify styles are imported in main.js:
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
File structure (Default structure from vue init webpack -myProject):
src/
-main.js
-app.vue
-components/
-problematicComponent.vue
index.html
Edit: I also tried using deep selectors, but the problem still remained with the hidden menu components:
>>>.v-menu__content {
height: 500px;
}
Therefore the problem I have is different than the problem here:
Vuetify - CSS not working (taking effect) inside component
I once had a similar problem with the vuetify selector component using SCSS. Are you addressing .v-menu__content as nested inside .v-select? Because, interestingly enough, it isn't a child. It is at the same level as v-app (For whatever reason).
Make sure
.v-menu__content {
height: 500px;
}
isn't nested inside any other components in your SCSS.
while writing deep selector write like
.any_parent_class(can be any identifier) >>>> target_class{
}
i tried it with scoped selector , it worked.
like
.flex >>>> .v-menu__content{
}
on the download page it says that the package essential (foundation-6.3.0-essential) contains Reveal Modal and Abide validation but after downloading see that it's not there in css.
All the Reveal classes are there but not Abide:
body.is-reveal-open {
overflow: hidden;
}
Everything is in the .css file and there's a minified version if you want to use that instead.
If you want Reveal and Abide, you can export your own custom build. That's what I recommend you do.