Hướng dẫn css to react style - css để phản ứng phong cách

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:

1. inline Styling
2. CSS Stylesheet
3. CSS Module
4. 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:
• CSS Stylesheet
• CSS Module
• Styled Components

Các component được tạo kiểu cung cấp:

Automatic critical CSS

Ví dụ

App.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;  

No class name bugs

Easier deletion of CSS

Simple dynamic styling

Painless maintenance

Installation

Ví dụ

App.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ủ 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à:

Ở đâ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ư , và 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 của trình bao bọc.

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

CSS Stylesheet

CSS Module

Ví dụ

App.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;  

App.css

body {  
  background-color: #008080;  
  color: yellow;  
  padding: 40px;  
  font-family: Arial;  
  text-align: center;  
}  

Index.html

CSS Module

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

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 (  
      
  
      
Hello React CSS
  
      
It provides great CS tutorials.
  
      
  
    );  
  }  
}  
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à:

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ể như , và 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 của trình bao bọc.

App.js

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

Bây giờ, hãy thực thi tập tin App.js.