歹勢，表達能力太差，廢話一堆....
影片本身有更多相關連結在影片下方!
============================
React裡面傳統寫CSS方式，原本要講這個啦!! 忘記在影片內說了....
跟傳統CSS寫法不一樣，分號改成逗號、名稱規則不太一樣(影片內有稍提)、數據要加引號
const addStyle = {
textAlign: 'center',
color: 'red',
fontSize: "36px",
textDecoration: 'underline overline',
backgroundColor: '#998900',
width: "760px",
margin: "0 auto"}
============================
還有補充一些影片內沒講到的，styled-components 範例程式碼，檔案內可看到該作者...
1. 關於全網頁範圍的CSS、三個產品layout、元件們，資料夾名稱使用小寫，其餘資料夾都是component's name開頭大寫，JS方便import指向，直接使用預設index.js
2. 最終輸出APP這個檔案，全部塞components，沒有任何CSS
3. 每個component只要有CSS，Export名稱一定是Styled+component's name，以及一定有以下兩行
import PropTypes from 'prop-types'
import styled from 'styled-components'
============================
結果看懂了，在
const StyledNavigation = styled(Navigation)
因為StyledNavigation 就已經包含了整個Navigation，所以最後export default StyledNavigation
，而寫不寫StyledNavigation.displayName = 'Navigation'
最大差異在於下圖，我們在debug時，顯示名稱
但我又開始納悶了，作者使用此寫法，有兩個缺點，
1. class name標得蠻多的，雖然匯入className，加上使用nested寫法，已經可以少想/也避免重複很多class name
2. styled-components去包整個component，在debug的時候看到一堆styled-components標籤，擔心會不會影響效能?
UI libraries
9 React Styled-Components UI Libraries
留言列表
