css-with-react

Hey, Today I will talk about topic for junior developers with React library, so what is this topic!!
I will talk about how to make styled components with React because every one need to see colors, animations and some hover and clicks.

I will mention three popular ways to implement css with React:

1- Inline CSS.

2-Modules CSS

3-Styled Components

1-Inline CSS:

Inline CSS isn’t the best way to implements CSS in app. but it can be useful in some situations.
This way is similar to using styles in HTML pages but it a little bit different. So let’s see it

image-code

This is Called the Inline Style with property min-width like is HTML pages but the syntax is change a little bit, it is using the camelCase.
You can read about it from https://techterms.com/definition/camelcase

The second way for Inline CSS is:

2-Module CSS:

CSS modules generate styles dynamically for a particular component. Here is an example for it.

css-module-image

Note:
The naming for your file must be your-name.module.css if you change this convention it will not working.
it is useful to use it in many components.

3-styled components:

Styled-components is a powerful library. in order to use this library, you should install it by this command
npm install — save styled-components

then you must import it in your JS file Ex:
import styled from ‘styled-components’;

image-code

Thanks for reading:
you can check out this helpful links for CSS with React
1-https://reactjs.org/docs/faq-styling.html
2-https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/