nextjs styled components ทำอะไร

Styled Components มีคอนเซ็ปทำให้ component สมบูรณ์ด้วยตนเอง ไม่ต้องแยกไฟล์ css .scss ซึ่งถือว่าดีมากๆ เราจะเขียน stylesheet ลงไปใน Component เลย และเมื่อสั่ง yarn build มันจะทำการ pack style จากฝั่ง SSR(Server Side Rendering) ไปลงอยู่ใน head เพื่อเพิ่มความไวและแก้ปัญหาเรื่อง Critical CSS Path (แต่มันเอามาทั้งหมดเลย ยังไม่ดีที่สุด)

1.Config ที่ต้องเพิ่ม หากจะใช้ Styled Component
1.1) เพิ่ม dependency ในไฟล์ package.json 2 อย่างคือ “styled-components”: “^4.1.3″ สำหรับภาษาพิเศษที่จะใช้ใน Component และ “babel-plugin-styled-components”: “^1.10.0″ สำหรับเป็นตัวแปลงภาษาให้รองรับทุก browser

"dependencies": {
    "@zeit/next-sass": "^1.0.1",
    "axios": "^0.18.0",
    "bootstrap": "^4.2.1",
    "classnames": "^2.2.6",
    "next": "^7.0.2",
    "node-sass": "^4.11.0",
    "react": "^16.7.0",
    "react-content-loader": "^4.0.0",
    "react-dom": "^16.7.0",
    "reactstrap": "^7.1.0",
    "styled-components": "^4.1.3"
  },
  "devDependencies": {
    "babel-plugin-styled-components": "^1.10.0"
  }

1.2) เพิ่มไฟล์ .barbelrc ใน root path ทำหน้าที่ config bable ให้ทำงานกับ Styled Component ได้

{
    "presets": ["next/babel"],
    "plugins": [["styled-components", { "ssr": true }]]
  }

2. เพิ่มไฟล์ _document.js ใน /pages ทำหน้าที่ pack style จากฝั่ง SSR

import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static async getInitialProps (ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: [...initialProps.styles, ...sheet.getStyleElement()]
      }
    } finally {
      sheet.seal()
    }
  }
}

ตัวอย่างโค้ด Styled Component
button.js

import styled from 'styled-components'

const getSize = size => {
switch (size) {
case 'sm':
return '9px 18px'
case 'md':
return '18px 18px'
case 'lg':
return '32px 32px'
}
}

const Button = styled.button`
background: #000;
color: #fff;
padding: ${props => getSize(props.size)};
outline: none;
border-radius: ${props => props.radius || 0}px;
`

export const ActiveButton = styled(Button)`
background: red;
`

export default Button

index.js

import Button, { ActiveButton } from '../components/shared/Button'

export default () => (
<div>
<Button radius={5} size="lg">
Hello World
</Button>
<ActiveButton radius={10} size="sm">
Active!
</ActiveButton>
</div>

หากต้องการให้ทุกๆ Component มีบางส่วนใช้ Global CSS ให้ใช้ createGlobalStyle

import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  body {
    color: ${props => (props.whiteColor ? 'white' : 'black')};
  }
`

// later in your app

<React.Fragment>
  <GlobalStyle whiteColor />
  <Navigation /> {/* example of other top-level stuff */}
</React.Fragment>

ในการทำงานจริง Designer จะต้องใช้ react sketchapp styled components ในการสร้าง Styled Component ขึ้นมา และส่ง Component ให้ Developer เอาไปทำ Logic ต่อนั่นเอง

Related posts:

This entry was posted in nextjs. Bookmark the permalink.