Hướng dẫn css trong reactjs - css in reactjs

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

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 (  
      
  
      
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 ngoặc nhọ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ì 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 (  
      
  
      
Hello React CSS!
  
      
Here, you can find all CS tutorials.
  
      
  
    );  
  }  
}  
export default App;  

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 ngoặc nhọn trong:

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

Styled Components

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

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ụ

• 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 ngoặc nhọ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ì 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

$ npm install styled-components --save  

Ví dụ

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;  

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 (  
       
            
              
            
  
            
  
                 Hello React CSS!!  
            
  
        
  
    );  
  }  
}  
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: