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

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