React 基礎：如何在 React 中寫 CSS

傳入一個 object 到 style 屬性（React 預設）

• style 後面會跟著兩個大括號，最外面是傳參數進去，裡面是參數裡面的 style 內容 （偽元素跟 hover 不能使用）

function Title({size}) {
    if (size === 'XL') {
        return <h1>hello</h1>
    }
    return (
        <h2 style={{
            color: 'red',
            textAlign: 'center'
        }}>Hello</h2>
    )
};



function Title({size}) {
    if (size === 'XL') {
        return <h1>hello</h1>
    }
}

function App() {
    return (
        <div>
            <Title size="M" />
        </div>
    )
}

在 JSX 中，要傳 CSS 屬性的話，要用 className

注意：ES6 中，class 是保留字

import './App.css'

function App() {
    return (
        <div className="App">
            <Title size="M" />
            <Description>
                 yoyoyo
            </Description>
        </div>
    )
}

styled-components 套件 （需要另外安裝）

動態產生 className
注意：styled-components 跟 判斷式 的寫法
官方文件：Basic 部分

• styled-component 的標準寫法

import styled from 'styled-components';

const TodoItemWrapper = styled.div`
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    border: 0.5px solid grey;
`

const TodoContent = styled.div`
    color: black;
    font-size: 12px;

    ${props => props.size === 'XL' && `
        font-size: 18px;
    `} // 短路的運算子
`
function App() {
    const titleSize = 'M'
    return (
        <Navbar>
            <TodoItemWrapper>
                <TodoContent size="XL">I am todo</TodoContent>
                <TodoButtonWrapper>
                    <Button>已完成</Button>
                    <Button>刪除</Button>
                </TodoButtonWrapper>
            </TodoItemWrapper>
        </Navbar>
    );
}

• 另外打包成一個 component

function TodoItem = ({ size, content }) => {
    return (
        <Navbar>
        <TodoItemWrapper>
            <TodoContent size={size}>{content}</TodoContent>
            <TodoButtonWrapper>
                <Button>已完成</Button>
                <BlueButton>刪除</BlueButton>
            </TodoButtonWrapper>
        </TodoItemWrapper>
    </Navbar>   
    )    
}

function App() {
    const titleSize = 'M'
    return (
        <div className="App">
            <TodoItem content={123} />
            <TodoItem content={456} size="XL" />
        </div>    
    )
}

進階 styled-components 用法

• 對 styled-components 重新做 re-style

const Button = styled.button`
    padding: 4px;
    color: black;
`
const BlueButton = styled(Button)`
    color: #191970;
` 
// 針對 Button 再做 re-style

• 對一般的 component，再做 re-style。（要另外傳入參數 className）

function TodoItem ({ className, size, content}) {
    return (
        <Navbar>
            <TodoItemWrapper className={className}>
                <TodoContent size="XL">I am todo</TodoContent>
                <TodoButtonWrapper>
                    <Button>已完成</Button>
                    <BlueButton>刪除</BlueButton>
                </TodoButtonWrapper>
            </TodoItemWrapper>
        </Navbar>
    )
}

const GreyTodoItem = styled(TodoItem)`
 background: grey;
`

• Media Query 寫法
  實務上，另開檔案（或是檔案夾），檔名通常為：constants.js

@ constants.js

export const MEDIA_QUERY_MD = '@media screen and (min-width: 768px)'
export const MEDIA_QUERY_LG = '@media screen and (min-width: 1000px)'

@ App.js

const Button = styled.button`
    padding: 4px;

    ${MEDIA_QUERY_MD} {
        font-size: 16px;
    }

    ${MEDIA_QUERY_LG} {
        font-size: 12px
    }

`

• Theme Provider 用法

@ index.js

import { ThemeProvider } from 'styled-component'

const theme = {
    colors: {
    red_300: '#220000',
    red_400: '#440000',
    red_500: '#226000',
}

ReactDOM.render (
    <ThemeProvider theme={theme}>
        <App />
    </ThemePropvider>,
    document.getElementByID('root')
)

@ App.js

import { ThemeProvider } from 'styled-component'

const TodoContnet = styled.div`
    color: ${props => props.theme.colors.red_300}
    font-size: 12px;
`

JSX 背後的秘密

為何我們能夠寫出 styled components 的語法，背後就是靠著 Babel 幫我們轉譯成 JS 的程式碼。

• 舉個例子

// JSX 寫法
<Button size="XL" onclick={()=> {alert(1)}}>hello</Button>

// babel 幫我們轉譯成
React.createElemnet(Button, size:"XL", onclick={()=> {alert(1)}}, 'hello')
// 第二個參數為 props; 第三個參數為 children