Tự học ReactJS: Style trong React

Có hai cách chính để style cho react components:

1. Inline styles với style prop
2. Sử dụng className prop và css selector

---

style prop

Trong HTML bạn có thể truyền css như một chuỗi như sau:

<div style="margin-top: 20px; background-color: blue;"></div>

Trong React, bạn cần truyền vào một object của css:

<div style={{marginTop: 20, backgroundColor: 'blue'}} />

Chú ý rằng trong react cú pháp {{ value }} là cú pháp kết hợp giữa JSX expression và object expression. Bạn có thể hình dung thế này:

const myStyles = {marginTop: 20, backgroundColor: 'blue'}
<div style={myStyles} />

Chú ý rằng property name ở đây là camelCase chứ không phải là kebab-case.

className prop

Bạn có thể sử dụng className prop để set class name cho một element như sau:

<div className='text'>Hello</div>

Sau đó bạn dùng css selector class .text để style cho component.

Bài tập 1. Giả sử bạn có các css sẵn như sau:

/* box-styles.css */
.box {
  border: 1px solid #333;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.box--large {
  width: 270px;
  height: 270px;
}
.box--medium {
  width: 180px;
  height: 180px;
}
.box--small {
  width: 90px;
  height: 90px;
}

import * as React from 'react'
import '../box-styles.css'

const smallBox = <div>small lightblue box</div>
const mediumBox = <div>medium pink box</div>
const largeBox = <div>large orange box</div>

function App() {
  return (
    <div>
      {smallBox}
      {mediumBox}
      {largeBox}
    </div>
  )
}

export default App

Bạn hãy sử dụng các class ở trong file css để style cho smallBox, mediumBox, largeBox.

Kết quả cuối cùng như hình sau:

Đáp án:

import * as React from 'react'
import '../box-styles.css'

const smallBox = (
  <div
    className="box box--small"
    style={{fontStyle: 'italic', backgroundColor: 'lightblue'}}
  >
    small lightblue box
  </div>
)
const mediumBox = (
  <div
    className="box box--medium"
    style={{fontStyle: 'italic', backgroundColor: 'pink'}}
  >
    medium pink box
  </div>
)
const largeBox = (
  <div
    className="box box--large"
    style={{fontStyle: 'italic', backgroundColor: 'orange'}}
  >
    large orange box
  </div>
)

function App() {
  return (
    <div>
      {smallBox}
      {mediumBox}
      {largeBox}
    </div>
  )
}

export default App

Bài tập 2. Tạo custom component

Bạn hãy thử tạo một component tên <Box /> render một thẻ div, nhận vào các props như: className, style:

<Box className="box--small" style={{backgroundColor: 'lightblue'}}>
  small lightblue box
</Box>

Đáp án:

import * as React from 'react'
import '../box-styles.css'

function Box({style, className = '', ...otherProps}) {
  return (
    <div
      className={`box ${className}`}
      style={{fontStyle: 'italic', ...style}}
      {...otherProps}
    />
  )
}

function App() {
  return (
    <div>
      <Box className="box--small" style={{backgroundColor: 'lightblue'}}>
        small lightblue box
      </Box>
      <Box className="box--medium" style={{backgroundColor: 'pink'}}>
        medium pink box
      </Box>
      <Box className="box--large" style={{backgroundColor: 'orange'}}>
        large orange box
      </Box>
      <Box>sizeless box</Box>
    </div>
  )
}

export default App

Bài tập 3. Tạo môt custom component nhận vào prop size

Hãy tạo một component như sau:

<Box size="small" style={{backgroundColor: 'lightblue'}}>
  small lightblue box
</Box>

Bằng việc sử dụng prop size bạn sẽ không cần quan tâm truyền vào className gì nữa. Mọi thứ đều được Box component xử lý bên trong. Điều đó sẽ giúp bạn dễ sử dụng component Box hơn.

Đáp án:

function Box({style, size, className = '', ...otherProps}) {
  const sizeClassName = size ? `box--${size}` : ''
  return (
    <div
      className={`box ${className} ${sizeClassName}`}
      style={{fontStyle: 'italic', ...style}}
      {...otherProps}
    />
  )
}

thaunguyen.com via Epic React by Kent C.Dodds