Reactjs - sử dụng CSS & Sass

04/01/2022 React

Reactjs - sử dụng CSS & Sass

Có nhiều cách để tạo kiểu cho React với CSS, hướng dẫn này sẽ xem xét kỹ hơn về kiểu nội tuyến và biểu định kiểu CSS.

1. Tạo kiểu nội tuyến
Để tạo kiểu cho một phần tử có thuộc tính kiểu nội tuyến, giá trị phải là một đối tượng JavaScript:

Thí dụ:
Chèn một đối tượng với thông tin kiểu:

Lưu ý: Trong JSX, các biểu thức JavaScript được viết bên trong dấu ngoặc nhọn và vì các đối tượng JavaScript cũng sử dụng dấu ngoặc nhọn, nên kiểu trong ví dụ trên được viết bên trong hai bộ dấu ngoặc nhọn {{}}.

import React from 'react';
import ReactDOM from 'react-dom';

class MyHeader extends React.Component {
render() {
return (
<div>
<h1 style={{color: "red"}}>Hello Style!</h1>
<p>Add a little style!</p>
</div>
);
}
}

ReactDOM.render(<MyHeader />, document.getElementById('root'));

* CamelCased Property Name
Vì CSS nội tuyến được viết bằng một đối tượng JavaScript nên các thuộc tính có hai tên, như background-color, phải được viết với cú pháp chữ hoa camel:

import React from 'react';
import ReactDOM from 'react-dom';

class MyHeader extends React.Component {
render() {
return (
<div>
<h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
<p>Add a little style!.</p>
</div>
);
}
}

ReactDOM.render(<MyHeader />, document.getElementById('root'));

* Đối tượng JavaScript
Bạn cũng có thể tạo một đối tượng với thông tin kiểu và tham chiếu đến nó trong thuộc tính style:

Thí dụ:
Tạo một đối tượng kiểu có tên mystyle:

import React from 'react';
import ReactDOM from 'react-dom';

class MyHeader extends React.Component {
render() {
const mystyle = {
color: "white",
backgroundColor: "DodgerBlue",
padding: "10px",
fontFamily: "Arial"
};
return (
<div>
<h1 style={mystyle}>Hello Style!</h1>
<p>Add a little style!</p>
</div>
);
}
}

ReactDOM.render(<MyHeader />, document.getElementById('root'));

2. File CSS
Bạn có thể viết kiểu CSS của mình trong một tệp riêng, chỉ cần lưu tệp với phần mở rộng tệp .css và nhập nó vào ứng dụng của bạn.

Lưu ý: Bạn có thể gọi tệp bất cứ điều gì bạn thích, chỉ cần nhớ đúng phần mở rộng của tệp.

import file car.css vào index.js

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css'; //trong này chứa css thông thường, các thẻ thì thêm class, id vào để sử dụng

class MyHeader extends React.Component {
render() {
return (
<div>
<h1 class=”plgcolor”>Hello Style!</h1>
<p>Add a little style!.</p>
</div>
);
}
}

ReactDOM.render(<MyHeader />, document.getElementById('root'));

/*
Notice that you now have three files in your project:
'index.js', 'index.html', and 'App.css'.
*/

3. Mô-đun CSS
Một cách khác để thêm kiểu vào ứng dụng của bạn là sử dụng Mô-đun CSS.

Mô-đun CSS thuận tiện cho các component được đặt trong các tệp riêng biệt.

CSS bên trong mô-đun chỉ có sẵn cho component đã nhập nó và bạn không phải lo lắng về xung đột tên.

Tạo mô-đun CSS với phần mở rộng .module.css, ví dụ: mystyle.module.css.

mystyle.module.css:
Tạo một tệp mới có tên "mystyle.module.css" và chèn một số mã CSS vào đó:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Car from './App.js';

ReactDOM.render(<Car />, document.getElementById('root'));

App.js

import React from 'react';
import ReactDOM from 'react-dom';
import styles from './mystyle.module.css';

class Car extends React.Component {
render() {
return <h1 className={styles.bigblue}>Hello Car!</h1>;
}
}

export default Car;

mystyle.module.css

.bigblue {
color: DodgerBlue;
padding: 40px;
font-family: Arial;
text-align: center;
}

tóm lại là dùng Mô-đun CSS

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import styles from './mystyle.module.css';

class MyHeader extends React.Component {
render() {
return (
<div>
<h1 className={styles.bigblue}>Hello Style!</h1>

</div>
);
}
}
ReactDOM.render(<MyHeader />, document.getElementById('root'));

mystyle.module.css

.bigblue {
color: DodgerBlue;
padding: 40px;
font-family: Arial;
text-align: center;
}

4. Styling React Using CSS

* Sass là gì
Sass là một trình xử lý trước CSS.
Các tệp Sass được thực thi trên máy chủ và gửi CSS đến trình duyệt.
Bạn có thể tìm hiểu thêm về Sass trong Hướng dẫn về Sass của chúng tôi.

* Tôi có thể sử dụng Sass không?
Nếu bạn sử dụng ứng dụng tạo-phản ứng trong dự án của mình, bạn có thể dễ dàng cài đặt và sử dụng Sass trong các dự án React của mình.

Cài đặt Sass bằng cách chạy lệnh này trong thiết bị đầu cuối của bạn:

C:\Users\Your Name>npm install node-sass

Bây giờ bạn đã sẵn sàng đưa các tệp Sass vào dự án của mình!

* Tạo tệp Sass
Tạo tệp Sass giống như cách bạn tạo tệp CSS, nhưng tệp Sass có phần mở rộng tệp .scss

Trong tệp Sass, bạn có thể sử dụng các biến và các hàm Sass khác:

Tạo một biến để xác định màu của văn bản:

mysass.scss:

$myColor: red;

h1 {
color: $myColor;
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './mysass.scss';

class MyHeader extends React.Component {
render() {
return (
<div>
<h1>Hello Style!</h1>
<p>Add a little style!.</p>
</div>
);
}
}