I am trying to use Saasland template into gatsby. I am new to gatsby and new to graphql as well.
layout.js
import 'bootstrap/dist/css/bootstrap.min.css'
import "./layout.module.css"
layout.module.css has all the style classes from Saasland template. For images the css has:
background: url("../images/home5/shap_tecture.png")
I am already facing an issue with loading these images on a component (page).
From my previous question, I was told to follow https://www.gatsbyjs.org/docs/working-with-images/ to deal with images.
So, How can I use GraphQL for images that are referenced in css as shown above ? Do I need to write a query for each image ?
Related
I'm developing a component library in React using Styled Components and Rollup as a bundler. Also, I'm using Storybook.
Now I want to add the Open Sans font from Google Fonts. I know how to do this when developing a standard React project, but I'm not sure how to do this when developing a component library.
What I tried/ways I know of:
Adding the link to the head of the HTML document (I don't have an HTML document since I'm developing a component library)
Creating a GlobalStyles object using Styled Components and inserting an #font-face there (I don't think this is possible since the GlobalStyles object needs to be inserted in the JSX of the index.ts file which I don't have)
Does anyone know how I should handle this?
I'm following a tutorial and in it a .svg file is being imported as a component. The line of code is:
import {ReactComponent as OfferIcon} from '../assets/svg/localOfferIcon.svg';.
I understand that the .svg file is being imported as a component, however, I dont understand where ReactComponent comes from? I've checked the .svg file and it isn't mentioned in it. Is this a special keyword when importing an .svg file? If someone can point me to the documentation then that would also be nice.
I assume you are using Create React App. Create React App uses SVGR to transform .svg files so you can just import them in your React app. The svg file is transformed in a way that it exports a React component called "ReactComponent". That's why you have to import "ReactComponent" from the file and then rename it to whatever you would like!
Find more information in this really nice blog post. Basically, you can just use <svg> tags in your JSX. However, if you want to import .svg files, you will need a transformer that transforms the content of the file into a React component, which just returns the <svg> content in JSX.
I have created image folder in Src. But that is not working for Background-image:url('') in CSS file. Iam getting error. I have 100's of images. Every time i need to import and bind in jsx. Is there any other way to resolve this issue?
is there a way to disable tailwindcss styles from being applied to certain react components? I am trying to use react-markdown which will convert a markdown file into JSX. However, since tailwindcss will disable the default styling of header tags (eg. the <h1> tag), the markdown does not display properly.
Is it possible to disable tailwind for the specific file that uses react-markdown to render the markdown file? Or is there another way to display markdown files in React using tailwind.
Any help is appreciated!
There is also a typography plugin for tailwind. You could check it out too.
Here is a link for setting up the typography plugin and applying it to only parts of a react app.
I am pretty new to Gatsby Js, I am quite struggling to understand how I can change my Header component styling based the current path. The Header component is common to all the pages but the styling should change slightly when I navigate to other pages like /portfolio and /team. Due to Gatsby SSR in production on the first page load when the path is "/portfolio or "team" the proper styling for the header doesn't change since the code to modify the className of the header component happens in the browser. Is there any way using the Browser API or SSR API to add/remove the correct className of the Header component? I hope I made it clear enough.
Actually its easy. Gatsby comes with a handy plugin called react-helmet make sure you have it inside your package.json if you don't, check the Docs for installation.
All you need to do is to import helmet inside your targeted page for example portfolio.js
import { Helmet } from 'react-helmet'
After your <SEO> component, add Helmet component and define a CSS class within bodyAttributes element like so:
<Helmet bodyAttributes={{ class: 'portfolio-page' }} />
This will add portfolio-page class to the page body tag, and so, you can target that class like you would with regular CSS classes.
.portfolio-page .your-navigation {
background-color: black;
}
Here is a codeSandbox for live example. Check page-2.js and components > layout.css