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







Related Posts

PHP & MySQL 陽春留言板實作

PHP & MySQL 陽春留言板實作

【單元測試的藝術】Chap 4: 使用模擬物件驗證互動

【單元測試的藝術】Chap 4: 使用模擬物件驗證互動

Command Line 基本操作

Command Line 基本操作






Comments