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: Các bài viết liên quan:
Inline Styling
Tên thuộc tính camelCase
Sử dụng đối tượng JavaScript
App.js
import React from 'react'; import ReactDOM from 'react-dom'; class App extends React.Component { render[] { return []; } } export default App;Hello React CSS!
Here, you can find all CS tutorials.
Installation
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ụ
Tên thuộc tính camelCase
Sử dụng đối tượng JavaScript
Sử dụng đối tượng JavaScript
App.js
import React from 'react'; import ReactDOM from 'react-dom'; class App extends React.Component { render[] { return []; } } export default App;Hello React CSS!
Here, you can find all CS tutorials.
Sử dụng đối tượng JavaScript
Installation
Sử dụng đối tượng JavaScript
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 []; } } export default App;Hello CSS React
Here, you can find all CS tutorials.
CSS Stylesheet
Installation
Sử dụng đối tượng JavaScript
App.js
import React from 'react'; import ReactDOM from 'react-dom'; import './App.css'; class App extends React.Component { render[] { return []; } } export default App;Hello React CSS
Here, you can find all CS tutorials.
App.css
body { background-color: #008080; color: yellow; padding: 40px; font-family: Arial; text-align: center; }
Index.html
Hello React App
CSS Module
Styled Components
Sử dụng đối tượng JavaScript
App.js
import React from 'react'; import ReactDOM from 'react-dom'; import styles from './myStyles.module.css'; class App extends React.Component { render[] { return []; } } export default App;Hello React CSS
It provides great CS tutorials.
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
Các bài viết liên quan:
Inline Styling
- Tên thuộc tính camelCase
- Sử dụng đối tượng JavaScript
- Installation
- 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ụ
Các bài viết liên quan:
Inline Styling
$ npm install styled-components --save
Sử dụng đối tượng JavaScript
Installation
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.h2` 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 [Styled Components Example]; } } export default App;Hello React CSS!!
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.