Hướng dẫn style css reactjs

Đã đăng vào thg 2 22, 2018 3:14 SA 2 phút đọc

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 = () => (
  

    
Get started with CSS styling
  
);

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 = () => (

  
Get started with inline style

);

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 = () => (
  

    
Get started with CSS Modules style
 
);

export default DashedBox;

Như ở trên apply style của class container cho một div với . 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

  
Get started with CSS Modules style

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 = () => 

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.`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

Send

CSS

.dxLjPX {
  background: green
}

Tham khảo

Modular CSS with React

Four ways to style react components

All rights reserved