CSS trong React được sử dụng để tạo kiểu cho Ứng dụng hoặc component React. Thuộc tính style là thuộc tính được sử dụng nhiều nhất để tạo kiểu trong các ứng dụng React, thuộc tính này bổ sung các kiểu được tính toán động tại thời điểm kết xuất. Nó chấp nhận một đối tượng JavaScript trong thuộc tính camelCase hơn là một chuỗi CSS. Có nhiều cách có sẵn để thêm kiểu vào Ứng dụng hoặc component React của bạn bằng CSS. Ở đây, chúng ta sẽ thảo luận chủ yếu về bốn cách để tạo kiểu cho các component React, được đưa ra dưới đây:
- inline Styling
- CSS Stylesheet
- CSS Module
- Styled Components
Các bài viết liên quan:
Inline Styling
Các kiểu nội tuyến được chỉ định bằng một đối tượng JavaScript trong phiên bản camelCase của tên kiểu. Giá trị của nó là giá trị kiểu mà chúng ta thường lấy trong một chuỗi.
Ví dụ
App.js
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
return (
<div>
<h1 style={{color: "Green"}}>Hello React CSS!</h1>
<p>Here, you can find all CS tutorials.</p>
</div>
);
}
}
export default App;
Lưu ý: Bạn có thể thấy trong ví dụ trên, chúng tôi đã sử dụng hai dấu ngoặc nhọn trong:
<h1 style = {{color: “Green”}}> Xin chào JavaTpoint! </h1>.
Đó là bởi vì, trong JSX, các biểu thức JavaScript được viết bên trong dấu ngoặc nhọn và các đối tượng JavaScript cũng sử dụng dấu ngoặc nhọn, vì vậy kiểu trên được viết bên trong hai bộ dấu ngoặc nhọn {{}}.
Tên thuộc tính camelCase
Nếu các thuộc tính có hai tên, chẳng hạn như màu nền, thì nó phải được viết theo cú pháp hoa camel.
Ví dụ
App.js
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
return (
<div>
<h1 style={{color: "Red"}}>Hello React CSS!</h1>
<p style={{backgroundColor: "lightgreen"}}>Here, you can find all CS tutorials.</p>
</div>
);
}
}
export default App;
Sử dụng đối tượng JavaScript
Kiểu nội tuyến cũng cho phép chúng ta tạo một đối tượng với thông tin kiểu và tham chiếu nó trong thuộc tính style.
Ví dụ
App.js
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
const mystyle = {
color: "Green",
backgroundColor: "lightBlue",
padding: "10px",
fontFamily: "Arial"
};
return (
<div>
<h1 style={mystyle}>Hello CSS React</h1>
<p>Here, you can find all CS tutorials.</p>
</div>
);
}
}
export default App;
CSS Stylesheet
Bạn có thể viết kiểu trong một tệp riêng cho ứng dụng React của mình và lưu tệp với phần mở rộng .css. Bây giờ, bạn có thể nhập tệp này vào ứng dụng của mình.
Ví dụ
App.js
import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';
class App extends React.Component {
render() {
return (
<div>
<h1>Hello React CSS</h1>
<p>Here, you can find all CS tutorials.</p>
</div>
);
}
}
export default App;
App.css
body {
background-color: #008080;
color: yellow;
padding: 40px;
font-family: Arial;
text-align: center;
}
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<title>Hello React App</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
CSS Module
Mô-đun CSS là một cách khác để thêm kiểu vào ứng dụng của bạn. Nó là một tệp CSS trong đó tất cả các tên lớp và tên hoạt ảnh được xác định phạm vi cục bộ theo mặc định. Nó chỉ có sẵn cho component nhập nó, có nghĩa là bất kỳ kiểu dáng nào bạn thêm vào không bao giờ có thể được áp dụng cho các component khác mà không có sự cho phép của bạn và bạn không bao giờ cần phải lo lắng về xung đột tên. Bạn có thể tạo Mô-đun CSS với phần mở rộng .module.css giống như tên myStyles.module.css.
Ví dụ
App.js
import React from 'react';
import ReactDOM from 'react-dom';
import styles from './myStyles.module.css';
class App extends React.Component {
render() {
return (
<div>
<h1 className={styles.mystyle}>Hello React CSS</h1>
<p className={styles.parastyle}>It provides great CS tutorials.</p>
</div>
);
}
}
export default App;
myStyles.module.css
.mystyle {
background-color: #cdc0b0;
color: Red;
padding: 10px;
font-family: Arial;
text-align: center;
}
.parastyle{
color: Green;
font-family: Arial;
font-size: 35px;
text-align: center;
}
Styled Components
Styled-components là một thư viện dành cho React. Nó sử dụng CSS nâng cao để tạo kiểu cho các hệ thống component React trong ứng dụng của bạn, được viết bằng hỗn hợp JavaScript và CSS.
Các component được tạo kiểu cung cấp:
- Automatic critical CSS
- No class name bugs
- Easier deletion of CSS
- Simple dynamic styling
- Painless maintenance
Installation
Thủ thư component được tạo kiểuy dùng một lệnh duy nhất để cài đặt trong ứng dụng React của bạn. đó là:
$ npm install styled-components --save
Ví dụ
Ở đây, chúng tôi tạo một biến bằng cách chọn một phần tử HTML cụ thể như <div>, <Title> và <paragraph> nơi chúng tôi lưu trữ các thuộc tính kiểu của mình. Bây giờ chúng ta có thể sử dụng tên biến của chúng ta như một loại component React <Div> </Div> của trình bao bọc.
App.js
import React from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';
class App extends React.Component {
render() {
const Div:any = styled.div`
margin: 20px;
border: 5px dashed green;
&:hover {
background-color: ${(props:any) => props.hoverColor};
}
`;
const Title = styled.h1`
font-family: Arial;
font-size: 35px;
text-align: center;
color: palevioletred;
`;
const Paragraph = styled.p`
font-size: 25px;
text-align: center;
background-Color: lightgreen;
`;
return (
<div>
<Title>Styled Components Example</Title>
<p></p>
<Div hoverColor="Orange">
<Paragraph>Hello React CSS!!</Paragraph>
</Div>
</div>
);
}
}
export default App;
Bây giờ, hãy thực thi tập tin App.js.
