Tạo kiểu là một phần quan trọng trong việc phát triển bất kỳ ứng dụng web hiện đại nào. Thời của các trang web HTML đơn giản đã qua lâu rồi. Bây giờ các trang web cần phải có thiết kế đẹp để thu hút người dùng và có vẻ đáng tin cậy. Hãy xem cách bạn có thể tạo kiểu cho các ứng dụng React của mình

Bài viết dưới đây không trình bày danh sách đầy đủ tất cả các cách tạo kiểu cho ứng dụng React, mà chỉ là một số cách được chọn mà cá nhân tôi thấy hữu ích

tệp CSS

Cách rõ ràng và đơn giản nhất để tạo kiểu cho ứng dụng React là nhập các tệp CSS. Đây thực sự là cách làm việc mặc định và nếu bạn đã sử dụng ứng dụng tạo-phản ứng để thiết lập dự án của mình thì bạn nên chuẩn bị sẵn tất cả và hoạt động. Hãy xem ứng dụng của bạn. js và ứng dụng. tập tin css

h1 {
  color: pink;
}

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Trong đoạn mã trên được lấy từ Ứng dụng. css, bạn có thể thấy rằng chúng tôi đang sử dụng CSS thông thường để tạo kiểu cho ứng dụng React. Cũng giống như trong bất kỳ ứng dụng web nào khác, hãy đảm bảo rằng bộ chọn thực sự đang nhắm mục tiêu các phần tử có liên quan và thì đấy. Bạn vừa tạo kiểu cho ứng dụng React của mình

Để chứng minh quan điểm của mình, tôi đã thêm mã tùy chỉnh tạo kiểu cho phần tử h1 ở đầu tệp. Nó khớp với phần tử h1 mà tôi đã thêm vào trong JSX của Ứng dụng. js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    

      

        
Hello from Upmostly
        
        

          Edit src/App.js and save to reload.
        
        
          Learn React
        
      
    
  );
}

export default App;

Hãy xem liệu nó có áp dụng các kiểu có liên quan không

Ví dụ ứng dụng 1

Có vẻ như nó đã làm. Tất cả những điều kỳ diệu xảy ra vì

nhập khẩu '. /Ứng dụng. css’;

tuyên bố ở đầu Ứng dụng. js. Dòng mã này chịu trách nhiệm nhập các biểu định kiểu. Bây giờ bình luận nó ra và xem những gì sẽ xảy ra

Ví dụ ứng dụng 2

Nó trông không hoàn toàn giống nhau, phải không?

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

Kỹ thuật này đặc biệt hữu ích khi cố gắng thực hiện các thay đổi kiểu dáng rất nhỏ ở đây và ở đó. Hãy hoàn tác các thay đổi mà chúng tôi đã triển khai trong Ứng dụng. css để có một khởi đầu mới. Giả sử rằng lần này chúng ta muốn tạo kiểu cho phần tử h1 đó thành màu đỏ. Chúng ta có thể dễ dàng thực hiện nó bằng cách sử dụng thuộc tính style

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    

      

        
Hello from Upmostly
        
        

          Edit src/App.js and save to reload.
        
        
          Learn React
        
      
    
  );
}

export default App;

Ví dụ ứng dụng 3

Điều quan trọng cần chỉ ra là thuộc tính kiểu không chấp nhận mã CSS thông thường. Thay vào đó, nó mong đợi một đối tượng có thuộc tính là tên lạc đà của thuộc tính CSS. Các giá trị sẽ được cung cấp dưới dạng chuỗi. Để tham khảo chính xác hơn, vui lòng xem tài liệu chính thức về phong cách của React

Thành phần theo kiểu

Bạn đã bao giờ nghe nói về styled-components chưa? . Đó là cách yêu thích của tôi để tạo kiểu mã React. Bạn sẽ thấy tại sao

Tái bút. Để được giải thích chi tiết hơn về styled-components, vui lòng xem bài viết của Osman. Nó bao gồm các thư viện chi tiết hơn

Bạn có thể cài đặt các thành phần theo kiểu bằng cách chạy

$ npm cài đặt – lưu các thành phần theo kiểu

trong thư mục gốc của ứng dụng React của bạn

Sau đó, chúng ta có thể chỉ cần xác định thành phần YellowHeader mới của mình và bắt đầu sử dụng nó trên ứng dụng. Hãy xem nhanh mã

import logo from './logo.svg';
import styled from 'styled-components'
import './App.css';

function App() {
  return (
    

      

        Hello from Upmostly
        
        

          Edit src/App.js and save to reload.
        
        
          Learn React
        
      
    
  );
}

export default App;

const YellowHeader = styled.h1`
  color: yellow
`

Ví dụ ứng dụng 4

Đó là 3 cách cơ bản nhất để tạo style cho ứng dụng React. Điều quan trọng cần lưu ý là danh sách này không đầy đủ. Có nhiều lựa chọn hơn ngoài kia. Một số trong số đó sẽ được đề cập chi tiết hơn trong các bài viết sắp tới tại Upmostly