4 cách để style React components

CSS Stylesheet

Đơn giản là bạn chỉ cần import file CSS vào component bạn muốn style.

Ví dụ ta có file DottedBox.css như sau

.DottedBox {
  margin: 40px;
  border: 5px dotted pink;
}

.DottedBox_content {
  font-size: 15px;
  text-align: center;
}

Để dùng CSS này style cho component DottedBox, ta import file này vào component DottedBox.

import React from 'react';
import './DottedBox.css';

const DottedBox = () => (
  <div className="DottedBox">
    <p className="DottedBox_content">Get started with CSS styling</p>
  </div>
);

export default DottedBox;

Inline styling

Với React, inline style không được thể hiện bằng một string mà bằng một object.

Ví dụ component Box:

import React from 'react';

const divStyle = {
  margin: '40px',
  border: '5px solid pink'
};

const pStyle = {
  fontSize: '15px',
  textAlign: 'center'
};

const Box = () => (
<div style={divStyle}>
  <p style={pStyle}>Get started with inline style</p>
</div>
);

export default Box;

Ta có thể tạo biến để lưu những style object này và truyền vào element bằng style={tenBien} hoặc ta có thể style trực tiếp element ví dụ style={{color: 'pink'}}.

CSS Modules

Với việc dùng CSS Module tên class và animation được giới hạn để chỉ apply cho riêng một component.

Ví dụ file DashedBox.css:

:local(.container) {
  margin: 40px;
  border: 5px dashed pink;
}

:local(.content) {
  font-size: 15px;
  text-align: center;
}

:local(.tenClass) khi dùng với create-react-app và .tenClass khi không dùng với create-react-app. Ta import file CSS vào component và access tên class trong file CSS giống như ta access một object vậy.

import React from 'react';
import styles from './DashedBox.css';

const DashedBox = () => (
  <div className={styles.container}>
    <p className={styles.content}>Get started with CSS Modules style</p>
 </div>
);

export default DashedBox;

Như ở trên apply style của class container cho một div với <div className={styles.container}>. Tên của class trong file CSS sẽ tự động trở thành tên class của element mà nó style. Ta cũng cần cấu hình Webpack để CSS module hoạt động.

. . .
{
 test: /.css$/,
 loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
}
. . .

Kết quả có được sau khi build là tên class của CSS và element đều là duy nhất với hash code đi kèm.

HTML

<div class="DashedBox__container__1DA66">
  <p class="DashedBox__content__X37D1"}>Get started with CSS Modules style</p>
</div>

CSS

.DashedBox__container__1DA66 {
  margin: 40px;
  border: 5px dashed pink;
}

.DashedBox__content__X37D1 {
  font-size: 15px;
  text-align: center;
}

Styled-components

Styled-components là một thư viện dành cho React và React Native giúp cho việc viết style CSS ngay trong một component.

Xét component FormWrapper sau:

import React from "react"
import styled from "styled-components"

const Input = styled.input`
 background: green
`

const FormWrapper = () => <Input placeholder="hola" />

export default FormWrapper

• Đầu tiên ta cần cài đặt style-component npm install styled-components --save hoặc yarn add styled-components
• Import Styled-components vào component import styled from 'styled-components'
• Tạo những wrapper dùng để style element bằng style.<tên Element>`style cua element` và sử dụng chúng để render

Kết quả sau khi build ta cũng được html và CSS với tên class là duy nhất.

HTML

<input placeholder="hola" class="dxLjPX">Send</input>

CSS

.dxLjPX {
  background: green
}

Tham khảo

Modular CSS with React

Four ways to style react components