[docs][recipes] Styling: Using Styled Components

[marcysutton]

Summary

To improve key learning workflows in the Recipes section of the docs, the "Styling" recipe should be broken up into smaller, more actionable parts. This issue is about the third item, Using Styled Components, coming after the standard CSS file recipes requested in https://github.com/gatsbyjs/gatsby/issues/14892 and https://github.com/gatsbyjs/gatsby/issues/14893.

The current recipe has this text (it will be replaced by Styling recipes inline):

There are so many ways to add styles to your website; Gatsby supports almost every possible option, through official and community plugins.

• Walk through adding global styles to an example site in tutorial part two
  • More on global styles with standard CSS files
  • More on global styles with CSS-in-JS
  • More on global styles with CSS files and no layout component
• Use the CSS-in-JS library Glamor
• Use the CSS-in-JS library Styled Components
• Use CSS Modules

Note: Glamor is no longer being actively maintained and we don't recommend using it anymore.

The actionable version of this Styled Components recipe should show how to work with it inline as concisely as possible. It should explain how to install Styled Components and show how to use it; we could consider listing installation as a prerequisite to keep the example short, but we can play around with it.

Recipes now follow this format:

• Requirements or prerequisites
• Step-by-step instructions
• Relevant links to any relevant information
  • More on using Styled Components https://www.gatsbyjs.org/docs/styled-components/
  • Link to the Egghead lesson: https://egghead.io/lessons/gatsby-style-gatsby-sites-with-styled-components

This recipe should go into the "Styling" section of docs/docs/recipes.md, replacing the existing text. There is a template in the contributing docs: https://www.gatsbyjs.org/contributing/docs-templates/#recipes

For reference, the new recipe collection is also listed in a spreadsheet: https://docs.google.com/spreadsheets/d/1yNUQi_-3TsuDtE98hCIJQvLZ6X1YHlDmC-EJwOGxiHk/edit#gid=1252007048

[harshil1712]

I would like to work on this

[marcysutton]

Sounds good @harshil1712! The change will go in docs/docs/recipes.md. There is already a heading for Styling, so this recipe would go into that section.

[harshil1712]

Hey, so this will go under Styling section, with the recipe name, there's no need to make a separate file. I hope I understood right

[marcysutton]

@harshil1712 that is correct! These styling recipes will replace the existing text.

[harshil1712]

Okay! PR coming your way

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[amberleyromo]

Closed in #15093