CSS: styled-components

www.youtube.com/watch?v=eQkkoUEVY-Q

www.youtube.com/watch?v=c5-Vex3ufFU&t=372s

[공부해야 할 것]

- styled-component와 연산자(operators)

- styled-component와 Hooks(useState)

 

[ThemeProvider]

1. npm install --save styled-theming

2. import { ThemeProvide } from 'styled-components'

3. <ThemeProvider> accepts a single proptheme which you should pass an object with either strings or getter functions. For example:

theme(name, values)

name should match one of the keys in your <ThemeProvider> theme.

theme.variants(name, prop, themes)

 

[styled-compnents rules]

1. Define Styled Components outside of the render method

It is important to define your styled components outside of the render method, otherwise it will be recreated on every single render pass. Defining a styled component within the render method will thwart caching and drastically slow down rendering speed, and should be avoided.