Styling React Components

What we will learn Today

  • Global vs Local/Module Scope
  • Template Literals
  • Tagged Template Literals
  • Styled Components Library
  • CSS Modules
  • JSS (CSS in JSS)
  • JSS vs SCSS

Global vs Modular

React Component Usage

<WonderfulComponent />

<WonderfulComponent>
I Do Wonders
</WonderfulComponent>

Style 1

Style 2

React Component Structure

React Component Code

CSS

CSS Selectors

#Id's

.Classes

*

Element (div, p, a, table)

Attributes

pseudo

Global Styles will haunt you everywhere you Go!

CSS

Template Literals

&

Tagged Template Literals

Styled-Components

https://www.styled-components.com/

Tagged Template Literals

https://wesbos.com/tagged-template-literals/

https://codesandbox.io/s/m3rkw0n7wy

Example

Further Reading

Example

https://codesandbox.io/s/jv3xxnj2jw

CSS Modules

https://github.com/css-modules/css-modules

How we write HTML and CSS

How we write with CSS Modules in JS

Here is the output

JSS (CSS in JS)

https://cssinjs.org

Example

https://codesandbox.io/s/k9jz6m3y0r

Thank You!

Sarabjeet Singh

Q&A

Styling React Components

By sarabs3

Styling React Components

  • 406