CSS trong React được sử dụng để tạo kiểu cho Ứng dụng hoặc thành phần 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 cho các kiểu tính toán được tính toán tại thời điểm 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 để thêm kiểu vào Ứng dụng hoặc thành phần Phản ứng của bạn bằng CSS. Ở đây, chúng ta sẽ thảo luận chủ yếu về cách thức sáng tạo để tạo kiểu cho các thành phần React, được đưa ra dưới đây

1. kiểu dáng nội tuyến
2. Biểu định kiểu CSS
3. Mô-đun CSS
4. Thành phần theo kiểu

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 thành phần hệ thống React trong ứng dụng của bạn, được viết bằng cách kết hợp JavaScript và CSS

• Các thành phần được tạo kiểu cung cấp
• Biểu định kiểu CSS
• Mô-đun CSS
• Thành phần theo kiểu

Các thành phần được tạo kiểu cung cấp

CSS quan trọng tự động

Ví dụ

Ứng dụng. js

import React from 'react';  
import ReactDOM from 'react-dom';  
  
class App extends React.Component {  
  render() {  
    return (  
      
  
      
Hello React CSS!
  
      
Here, you can find all CS tutorials.
  
      
  
    );  
  }  
}  
export default App;  

Không có lỗi tên lớp

Xóa CSS dễ dàng hơn

Kiểu dáng đơn giản năng động

bảo trì không đau

Cài đặt

Ví dụ

Ứng dụng. js

import React from 'react';  
import ReactDOM from 'react-dom';  
  
class App extends React.Component {  
  render() {  
    return (  
      
  
      
Hello React CSS!
  
      
Here, you can find all CS tutorials.
  
      
  
    );  
  }  
}  
export default App;  

Thành phần thủ thư được tạo theo kiểu sử dụng lệnh duy nhất để cài đặt trong ứng dụng React của bạn. which is

Tại đây, chúng tôi tạo một biến bằng cách chọn một phần tử HTML mà công cụ có thể thích , và nơi chúng tôi lưu trữ các loại thuộc tính 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 thành phần React của bao bọc

CSS trong React được sử dụng để tạo kiểu cho Ứng dụng hoặc thành phần 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 cho các kiểu tính toán được tính toán tại thời điểm 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 để thêm kiểu vào Ứng dụng hoặc thành phần Phản ứng của bạn bằng CSS. Ở đây, chúng ta sẽ thảo luận chủ yếu về cách thức sáng tạo để tạo kiểu cho các thành phần React, được đưa ra dưới đây

1. kiểu dáng nội tuyến
2. Biểu định kiểu CSS
3. Mô-đun CSS
4. Thành phần theo kiểu

Các bài viết liên quan

• Điều kiện Rendering trong react
• Dart Libraries – Thư viện Dart
• Thuốc phi tiêu
• Typedef in Dart language
• Định tuyến trong React

Tóm tắt nội dung

• Kiểu dáng nội tuyến
  • Thuộc tính camelCase Name
  • Sử dụng các đối tượng JavaScript
• Biểu định kiểu CSS
• Mô-đun CSS
• Thành phần theo kiểu
  • Cài đặt

Kiểu dáng nội tuyến

Các kiểu tuyến nội tuyến chỉ được định nghĩa 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ụ

Ứng dụng. js

import React from 'react';  
import ReactDOM from 'react-dom';  
  
class App extends React.Component {  
  render() {  
    return (  
      
  
      
Hello React CSS!
  
      
Here, you can find all CS tutorials.
  
      
  
    );  
  }  
}  
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 trích đoạn trong

Xin chào JavaTpoint.

Đó 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ì kiểu trên được viết bên trong hai dấu ngoặc nhọn {{}}

Thuộc tính camelCase Name

Nếu các thuộc tính có hai tên, không hạn chế như màu nền, thì nó phải được viết theo cú pháp hoa lạc đà

Ví dụ

Ứng dụng. js

import React from 'react';  
import ReactDOM from 'react-dom';  
  
class App extends React.Component {  
  render() {  
    return (  
      
  
      
Hello React CSS!
  
      
Here, you can find all CS tutorials.
  
      
  
    );  
  }  
}  
export default App;  

Sử dụng các đố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 kiểu thông tin và tham chiếu nó trong kiểu thuộc tính

Ví dụ

Ứng dụng. 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 (  
      
  
      
Hello CSS React
  
      
Here, you can find all CS tutorials.
  
      
  
    );  
  }  
}  
export default App;  

Biểu định kiểu CSS

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ụ

Ứng dụng. js

import React from 'react';  
import ReactDOM from 'react-dom';  
import './App.css';  
  
class App extends React.Component {  
  render() {  
    return (  
      
  
      
Hello React CSS
  
      
Here, you can find all CS tutorials.
  
      
  
    );  
  }  
}  
export default App;  

Ứng dụng. css

________số 8

Mục lục. html

Mô-đun CSS

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 động ảnh đã được xác định phạm vi cục bộ theo mặc định. Nó chỉ có sẵn cho thành phần 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 thành phần 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 lắng nghe về . Bạn có thể tạo CSS mô-đun với phần mở rộng. mô-đun. css giống như tên myStyles. mô-đun. css

Ví dụ

Ứng dụng. js

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Menuspan>
}

myStyles. mô-đun. css

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Menuspan>
}

Thành phần theo kiểu

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 thành phần hệ thống React trong ứng dụng của bạn, được viết bằng cách kết hợp JavaScript và CSS

Các thành phần được tạo kiểu cung cấp

• CSS quan trọng tự động
• Không có lỗi tên lớp
• Xóa CSS dễ dàng hơn
• Kiểu dáng đơn giản năng động
• bảo trì không đau

Cài đặt

Thành phần thủ thư được tạo theo kiểu sử dụng lệnh duy nhất để cài đặt trong ứng dụng React của bạn. which is

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Menuspan>
}

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ể thích

, and where they 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 thành phần React