Thinking about getting on the JAMStack bandwagon? If your answer is Yes, then Gatsby, one of the hottest static site generators around, could be just what you’re looking for.
[…]
That’s the typical code for a React component, that is:
[…]
The /src/components/ directory is where you find general components for your website. The default starter comes with the following components: Header (header.js), Image (image.js), Layout (layout.js), and SEO (seo.js). You’re free to customize these components and add your own to the same directory.
[…]
To see how it works, open layout.js and layout.css in your code editor (you’ll find both files inside the components/ directory).
At the top of layout.js, notice the import statement which makes available the CSS rules contained in layout.css to the shared Layout component and therefore to the entire website:
In layout.css, locate the CSS declaration for the body element, it should be around line 199. This is what it looks like:
[…]
A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.
[…]
Open fancy-paragraph.js in your code editor and enter the following code:
[…]
An additional option for styling components is just to add inline CSS styles in the form of a JS object.
[…]
Notice how CSS styles are applied to the
