Styling React Applications: Styled Components

[columk1]

Checks

• [x] This is not a duplicate of an existing issue (please have a look through our open issues list to make sure)
• [x] I have thoroughly read and understand The Odin Project Contributing Guide
• [ ] Would you like to work on this issue?

Describe your suggestion

There is a paragraph about CSS-in-JS and the only library it mentions is Styled Components.

One of the most popular ones in the React ecosystem is styled-components.

Later the lesson recommends using CSS modules or one of the CSS-in-JS options (which links back to where Styled Components is mentioned).

For learning purposes throughout this course, we strongly recommend that you avoid using CSS frameworks or component libraries (using icon component libraries is fine), and instead implement your component’s styling from scratch i.e. use CSS Modules or a CSS-in-JS option.

The Styled Components library author says that it is in "maintenance mode" and that it should not be used for new projects. They also say that the ecosystem has moved on from CSS-in-JS.

Source: https://opencollective.com/styled-components/updates/thank-you

I think we should push for students to use CSS modules instead of encouraging CSS-in-JS.

Path

Node / JS

Lesson Url

https://www.theodinproject.com/lessons/node-path-react-new-styling-react-applications

(Optional) Discord Name

columk

(Optional) Additional Comments

No response

[CouchofTomato]

@TheOdinProject/react Can someone take a look please.

[github-actions[bot]]

This issue is stale because it has had no activity for the last 30 days.

[github-actions[bot]]

This issue is stale because it has had no activity for the last 30 days.

[mao-sz]

Thanks @columk1

Acceptance criteria

• [ ] Rephrase the last sentence of the warning note box to something like (wording is a suggestion only):

  , and instead implement your components' styling with a more vanilla approach i.e. use CSS Modules.

• [ ] Give the warning note box a sufficiently descriptive level 4 heading (see the layout style guide for more info).

Please comment below if you'd like to be assigned to this issue. Please do not open a PR unless you have been assigned by a maintainer.

[frrst-ian]

I want to work on this issue.