CSS có nằm trong phạm vi React không?

Question

Không có cách tiếp cận phong cách viết trong React số 1 cho mọi dự án. Mỗi dự án đều khác nhau và có những nhu cầu khác nhau

Nội dung chính Show

Những gì chúng ta sẽ mã hóa
Kiểu nội tuyến
CSS đơn giản
SASS / SCSS
Mô-đun CSS
Phần kết luận
Muốn phần còn lại?
React có phạm vi CSS không?
Phạm vi của mô-đun CSS cho React là gì?
Tôi có thể sử dụng các biến CSS trong React không?
CSS có phạm vi là gì?

Đó là lý do tại sao ở cuối mỗi phần, tôi sẽ đề cập đến ưu và nhược điểm của từng phương pháp để giúp bạn chọn phương pháp phù hợp nhất với mình trong các dự án của mình.

Bắt đầu nào

Bạn muốn trở thành một nhà phát triển React chuyên nghiệp trong khi xây dựng các dự án tuyệt vời?

Những gì chúng ta sẽ mã hóa

Để xem mã của từng cách tiếp cận kiểu này so sánh với nhau như thế nào, chúng ta sẽ tạo cùng một ví dụ. một thẻ chứng thực đơn giản, nhưng rõ ràng

Bạn muốn viết mã cùng với từng ví dụ này? . new để tạo ứng dụng React mới ngay lập tức ✨

Kiểu nội tuyến

Kiểu nội tuyến là cách trực tiếp nhất để tạo kiểu cho bất kỳ ứng dụng React nào

Các yếu tố tạo kiểu nội tuyến không yêu cầu bạn tạo một biểu định kiểu riêng

Kiểu được áp dụng trực tiếp cho các phần tử so với kiểu trong biểu định kiểu cũng có mức độ ưu tiên cao hơn. Điều này có nghĩa là chúng "ghi đè" các quy tắc kiểu khác có thể được áp dụng cho một phần tử

Đây là thẻ lời chứng thực của chúng tôi được tạo kiểu với các kiểu nội tuyến

export default function App() {
  return (
    
      
        
        
          
            This is one of the best developer blogs on the planet! I read it daily to improve my skills.
          
        
        
          Tammy Stevens
           · Front End Developer
        
      
    
  );
}

Mặc dù có một vài lợi ích nhanh chóng, kiểu nội tuyến chỉ là lựa chọn chấp nhận được cho các ứng dụng rất nhỏ. Những khó khăn với kiểu nội tuyến trở nên rõ ràng khi cơ sở mã của bạn tăng lên một chút

Như ví dụ mã ở trên cho thấy, ngay cả một thành phần nhỏ như thế này cũng trở nên rất cồng kềnh nếu tất cả các kiểu đều nằm trong dòng

Tuy nhiên, một mẹo nhanh là đặt các kiểu nội tuyến thành các biến có thể tái sử dụng, có thể được lưu trữ trong một tệp riêng

const styles = {
  section: {
    fontFamily: "-apple-system",
    fontSize: "1rem",
    fontWeight: 1.5,
    lineHeight: 1.5,
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 2em"
  },
  wrapper: {
    textAlign: "center",
    maxWidth: "950px",
    margin: "0 auto",
    border: "1px solid #e6e6e6",
    padding: "40px 25px",
    marginTop: "50px"
  },
  avatar: {
    margin: "-90px auto 30px",
    width: "100px",
    borderRadius: "50%",
    objectFit: "cover",
    marginBottom: "0"
  },
  quote: {
    lineHeight: 1.5,
    fontWeight: 300,
    marginBottom: "25px",
    fontSize: "1.375rem"
  },
  name: {
    marginBottom: "0",
    fontWeight: 600,
    fontSize: "1rem"
  },
  position: { fontWeight: 400 }
};

export default function App() {
  return (
    
      
        
        
          
            This is one of the best developer blogs on the planet! I read it
            daily to improve my skills.
          
        
        
          Tammy Stevens
           · Front End Developer
        
      
    
  );
}

Bất chấp sự cải tiến này, các kiểu nội tuyến không có một số tính năng cần thiết mà bất kỳ biểu định kiểu CSS đơn giản nào cũng có thể cung cấp

Ví dụ: bạn không thể viết hoạt ảnh, kiểu cho các phần tử lồng nhau (i. e. tất cả các phần tử con, con đầu lòng, con cuối cùng), lớp giả (i. e. . hover) và các phần tử giả (. dòng đầu tiên) để đặt tên cho một số

Nếu bạn đang tạo mẫu một ứng dụng, các kiểu nội tuyến sẽ rất tuyệt. Tuy nhiên, khi bạn tiến xa hơn trong việc tạo ra nó, bạn sẽ cần chuyển sang một tùy chọn tạo kiểu CSS khác để cung cấp cho bạn các tính năng CSS cơ bản

👍 Ưu điểm

Cách nhanh nhất để viết phong cách
Tốt cho việc tạo mẫu (viết các kiểu nội tuyến sau đó chuyển sang biểu định kiểu)
Có tùy chọn tuyệt vời (có thể ghi đè kiểu từ biểu định kiểu)

👎 Nhược điểm

Tẻ nhạt để chuyển đổi CSS đơn giản sang kiểu nội tuyến
Rất nhiều kiểu nội tuyến khiến JSX không thể đọc được
Bạn không thể sử dụng các tính năng CSS cơ bản như hoạt ảnh, bộ chọn, v.v.
Không mở rộng quy mô tốt

CSS đơn giản

Thay vì sử dụng các kiểu nội tuyến, việc nhập biểu định kiểu CSS để tạo kiểu cho các thành phần của thành phần là điều phổ biến

Viết CSS trong biểu định kiểu có lẽ là cách tiếp cận cơ bản và phổ biến nhất để tạo kiểu cho ứng dụng React, nhưng nó không nên bị loại bỏ dễ dàng như vậy

Các kiểu viết trong biểu định kiểu CSS "đơn giản" ngày càng trở nên tốt hơn, do ngày càng có nhiều tính năng có sẵn trong tiêu chuẩn CSS

Điều này bao gồm các tính năng như biến CSS để lưu trữ các giá trị động, tất cả các cách bộ chọn nâng cao để chọn các phần tử con với độ chính xác và các lớp giả mới như

const styles = {
  section: {
    fontFamily: "-apple-system",
    fontSize: "1rem",
    fontWeight: 1.5,
    lineHeight: 1.5,
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 2em"
  },
  wrapper: {
    textAlign: "center",
    maxWidth: "950px",
    margin: "0 auto",
    border: "1px solid #e6e6e6",
    padding: "40px 25px",
    marginTop: "50px"
  },
  avatar: {
    margin: "-90px auto 30px",
    width: "100px",
    borderRadius: "50%",
    objectFit: "cover",
    marginBottom: "0"
  },
  quote: {
    lineHeight: 1.5,
    fontWeight: 300,
    marginBottom: "25px",
    fontSize: "1.375rem"
  },
  name: {
    marginBottom: "0",
    fontWeight: 600,
    fontSize: "1rem"
  },
  position: { fontWeight: 400 }
};

export default function App() {
  return (
    
      
        
        
          
            This is one of the best developer blogs on the planet! I read it
            daily to improve my skills.
          
        
        
          Tammy Stevens
           · Front End Developer
        
      
    
  );
}

3 và

const styles = {
  section: {
    fontFamily: "-apple-system",
    fontSize: "1rem",
    fontWeight: 1.5,
    lineHeight: 1.5,
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 2em"
  },
  wrapper: {
    textAlign: "center",
    maxWidth: "950px",
    margin: "0 auto",
    border: "1px solid #e6e6e6",
    padding: "40px 25px",
    marginTop: "50px"
  },
  avatar: {
    margin: "-90px auto 30px",
    width: "100px",
    borderRadius: "50%",
    objectFit: "cover",
    marginBottom: "0"
  },
  quote: {
    lineHeight: 1.5,
    fontWeight: 300,
    marginBottom: "25px",
    fontSize: "1.375rem"
  },
  name: {
    marginBottom: "0",
    fontWeight: 600,
    fontSize: "1rem"
  },
  position: { fontWeight: 400 }
};

export default function App() {
  return (
    
      
        
        
          
            This is one of the best developer blogs on the planet! I read it
            daily to improve my skills.
          
        
        
          Tammy Stevens
           · Front End Developer
        
      
    
  );
}

4

Đây là thẻ lời chứng thực của chúng tôi được viết bằng CSS đơn giản và được nhập ở đầu ứng dụng React của chúng tôi

/* src/styles.css */

body {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  font-size: 1rem;
  font-weight: 1.5;
  line-height: 1.5;
  color: #292b2c;
  background-color: #fff;
}
.testimonial {
  margin: 0 auto;
  padding: 0 2em;
}
.testimonial-wrapper {
  text-align: center;
  max-width: 950px;
  margin: 0 auto;
  border: 1px solid #e6e6e6;
  padding: 40px 25px;
  margin-top: 50px;
}
.testimonial-quote p {
  line-height: 1.5;
  font-weight: 300;
  margin-bottom: 25px;
  font-size: 1.375rem;
}
.testimonial-avatar {
  margin: -90px auto 30px;
  width: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0;
}
.testimonial-name {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1rem;
}
.testimonial-name span {
  font-weight: 400;
}

// src/App.js

import "./styles.css";

export default function App() {
  return (
    
      
        
        
          
            This is one of the best developer blogs on the planet! I read it daily to improve my skills.
          
        
        
          Tammy Stevens · Front End Developer
        
      
    
  );
}

Đối với thẻ lời chứng thực của chúng tôi, hãy lưu ý rằng chúng tôi đang tạo các lớp để áp dụng cho từng phần tử riêng lẻ. Tất cả các lớp này đều bắt đầu bằng cùng một tên

const styles = {
  section: {
    fontFamily: "-apple-system",
    fontSize: "1rem",
    fontWeight: 1.5,
    lineHeight: 1.5,
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 2em"
  },
  wrapper: {
    textAlign: "center",
    maxWidth: "950px",
    margin: "0 auto",
    border: "1px solid #e6e6e6",
    padding: "40px 25px",
    marginTop: "50px"
  },
  avatar: {
    margin: "-90px auto 30px",
    width: "100px",
    borderRadius: "50%",
    objectFit: "cover",
    marginBottom: "0"
  },
  quote: {
    lineHeight: 1.5,
    fontWeight: 300,
    marginBottom: "25px",
    fontSize: "1.375rem"
  },
  name: {
    marginBottom: "0",
    fontWeight: 600,
    fontSize: "1rem"
  },
  position: { fontWeight: 400 }
};

export default function App() {
  return (
    
      
        
        
          
            This is one of the best developer blogs on the planet! I read it
            daily to improve my skills.
          
        
        
          Tammy Stevens
           · Front End Developer
        
      
    
  );
}

5

CSS được viết bằng biểu định kiểu là lựa chọn đầu tiên tuyệt vời cho ứng dụng của bạn. Không giống như các kiểu nội tuyến, nó có thể tạo kiểu cho ứng dụng của bạn theo bất kỳ cách nào bạn cần

Một vấn đề nhỏ có thể là quy ước đặt tên của bạn. Khi bạn có một ứng dụng được phát triển rất tốt, sẽ khó nghĩ ra các tên lớp duy nhất cho các phần tử của bạn, đặc biệt là khi bạn có 5 div được bao bọc bên trong nhau

Nếu bạn không có quy ước đặt tên mà bạn tự tin với (tôi. e. BEM), dễ nhầm lẫn, cộng với việc tạo nhiều lớp trùng tên dẫn đến xung đột

Ngoài ra, viết CSS bình thường có thể dài dòng và lặp đi lặp lại hơn so với các công cụ mới hơn như SASS/SCSS. Do đó, có thể mất nhiều thời gian hơn để viết các kiểu của bạn bằng CSS so với một công cụ như SCSS hoặc thư viện CSS-in-JS

Ngoài ra, điều quan trọng cần lưu ý là vì CSS xếp tầng cho tất cả các phần tử con, nếu bạn áp dụng biểu định kiểu CSS cho một thành phần thì nó không chỉ nằm trong phạm vi của thành phần đó. Tất cả các quy tắc đã khai báo của nó sẽ được chuyển đến bất kỳ phần tử nào là con của thành phần được tạo kiểu của bạn

Nếu bạn tự tin với CSS, đây chắc chắn là một lựa chọn khả thi để bạn tạo kiểu cho bất kỳ ứng dụng React nào

Như đã nói, có một số thư viện CSS cung cấp cho chúng ta tất cả sức mạnh của CSS với ít mã hơn và bao gồm nhiều tính năng bổ sung mà CSS sẽ không bao giờ có (chẳng hạn như kiểu có phạm vi và tiền tố nhà cung cấp tự động)

👍 Ưu điểm

Cung cấp cho chúng tôi tất cả các công cụ của CSS hiện đại (biến, bộ chọn nâng cao, lớp giả mới, v.v. )
Giúp chúng tôi dọn sạch các tệp thành phần của mình khỏi các kiểu nội tuyến

👎 Nhược điểm

Cần thiết lập tiền tố nhà cung cấp để đảm bảo các tính năng mới nhất hoạt động cho tất cả người dùng
Yêu cầu gõ và soạn sẵn nhiều hơn các thư viện CSS khác (i. e. SASS)
Bất kỳ biểu định kiểu nào xếp tầng thành phần và tất cả phần tử con;
Phải sử dụng quy ước đặt tên đáng tin cậy để đảm bảo các kiểu không xung đột

SASS / SCSS

SASS là gì? . Cú pháp tuyệt vời Style Sheets

SASS cung cấp cho chúng tôi một số công cụ mạnh mẽ, nhiều công cụ trong số đó không tồn tại trong các biểu định kiểu CSS bình thường. Nó bao gồm các tính năng như biến, mở rộng kiểu và lồng

SASS cho phép chúng tôi viết các kiểu theo hai loại biểu định kiểu khác nhau, với các phần mở rộng. scss và. ngổ ngáo

Các kiểu SCSS được viết theo cú pháp tương tự như CSS bình thường, tuy nhiên các kiểu SASS không yêu cầu chúng ta sử dụng dấu ngoặc mở và đóng khi viết quy tắc kiểu

Dưới đây là một ví dụ nhanh về biểu định kiểu SCSS với một số kiểu lồng nhau

/* styles.scss */

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

So sánh điều này với cùng một mã được viết trong biểu định kiểu SASS

________số 8

Vì đây không phải là CSS thông thường nên nó cần được biên dịch từ SASS thành CSS đơn giản. Để làm như vậy trong các dự án React của chúng tôi, bạn có thể sử dụng một thư viện như node-sass

Nếu bạn đang sử dụng dự án Tạo ứng dụng React, để bắt đầu sử dụng. scss và. sass, bạn có thể cài đặt node-sass với npm

npm install node-sass

Đây là thẻ lời chứng thực của chúng tôi được tạo kiểu bằng SCSS

const styles = {
  section: {
    fontFamily: "-apple-system",
    fontSize: "1rem",
    fontWeight: 1.5,
    lineHeight: 1.5,
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 2em"
  },
  wrapper: {
    textAlign: "center",
    maxWidth: "950px",
    margin: "0 auto",
    border: "1px solid #e6e6e6",
    padding: "40px 25px",
    marginTop: "50px"
  },
  avatar: {
    margin: "-90px auto 30px",
    width: "100px",
    borderRadius: "50%",
    objectFit: "cover",
    marginBottom: "0"
  },
  quote: {
    lineHeight: 1.5,
    fontWeight: 300,
    marginBottom: "25px",
    fontSize: "1.375rem"
  },
  name: {
    marginBottom: "0",
    fontWeight: 600,
    fontSize: "1rem"
  },
  position: { fontWeight: 400 }
};

export default function App() {
  return (
    
      
        
        
          
            This is one of the best developer blogs on the planet! I read it
            daily to improve my skills.
          
        
        
          Tammy Stevens
           · Front End Developer
        
      
    
  );
}

0

Những phong cách này cung cấp cho chúng tôi các tính năng sau. biến, kiểu mở rộng và kiểu lồng nhau

Biến. Bạn có thể sử dụng các giá trị động bằng cách viết các biến, giống như trong JavaScript, bằng cách khai báo chúng với _____16 ở đầu

Có hai biến có thể được sử dụng trong nhiều quy tắc.

const styles = {
  section: {
    fontFamily: "-apple-system",
    fontSize: "1rem",
    fontWeight: 1.5,
    lineHeight: 1.5,
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 2em"
  },
  wrapper: {
    textAlign: "center",
    maxWidth: "950px",
    margin: "0 auto",
    border: "1px solid #e6e6e6",
    padding: "40px 25px",
    marginTop: "50px"
  },
  avatar: {
    margin: "-90px auto 30px",
    width: "100px",
    borderRadius: "50%",
    objectFit: "cover",
    marginBottom: "0"
  },
  quote: {
    lineHeight: 1.5,
    fontWeight: 300,
    marginBottom: "25px",
    fontSize: "1.375rem"
  },
  name: {
    marginBottom: "0",
    fontWeight: 600,
    fontSize: "1rem"
  },
  position: { fontWeight: 400 }
};

export default function App() {
  return (
    
      
        
        
          
            This is one of the best developer blogs on the planet! I read it
            daily to improve my skills.
          
        
        
          Tammy Stevens
           · Front End Developer
        
      
    
  );
}

7,

const styles = {
  section: {
    fontFamily: "-apple-system",
    fontSize: "1rem",
    fontWeight: 1.5,
    lineHeight: 1.5,
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 2em"
  },
  wrapper: {
    textAlign: "center",
    maxWidth: "950px",
    margin: "0 auto",
    border: "1px solid #e6e6e6",
    padding: "40px 25px",
    marginTop: "50px"
  },
  avatar: {
    margin: "-90px auto 30px",
    width: "100px",
    borderRadius: "50%",
    objectFit: "cover",
    marginBottom: "0"
  },
  quote: {
    lineHeight: 1.5,
    fontWeight: 300,
    marginBottom: "25px",
    fontSize: "1.375rem"
  },
  name: {
    marginBottom: "0",
    fontWeight: 600,
    fontSize: "1rem"
  },
  position: { fontWeight: 400 }
};

export default function App() {
  return (
    
      
        
        
          
            This is one of the best developer blogs on the planet! I read it
            daily to improve my skills.
          
        
        
          Tammy Stevens
           · Front End Developer
        
      
    
  );
}

8

Mở rộng / Kế thừa. Bạn có thể thêm vào các quy tắc kiểu bằng cách mở rộng chúng. Để mở rộng quy tắc, bạn tạo bộ chọn riêng có thể được sử dụng lại như một biến. Tên của các quy tắc mà bạn muốn mở rộng bắt đầu bằng

const styles = {
  section: {
    fontFamily: "-apple-system",
    fontSize: "1rem",
    fontWeight: 1.5,
    lineHeight: 1.5,
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 2em"
  },
  wrapper: {
    textAlign: "center",
    maxWidth: "950px",
    margin: "0 auto",
    border: "1px solid #e6e6e6",
    padding: "40px 25px",
    marginTop: "50px"
  },
  avatar: {
    margin: "-90px auto 30px",
    width: "100px",
    borderRadius: "50%",
    objectFit: "cover",
    marginBottom: "0"
  },
  quote: {
    lineHeight: 1.5,
    fontWeight: 300,
    marginBottom: "25px",
    fontSize: "1.375rem"
  },
  name: {
    marginBottom: "0",
    fontWeight: 600,
    fontSize: "1rem"
  },
  position: { fontWeight: 400 }
};

export default function App() {
  return (
    
      
        
        
          
            This is one of the best developer blogs on the planet! I read it
            daily to improve my skills.
          
        
        
          Tammy Stevens
           · Front End Developer
        
      
    
  );
}

9

Biến

/* src/styles.css */

body {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  font-size: 1rem;
  font-weight: 1.5;
  line-height: 1.5;
  color: #292b2c;
  background-color: #fff;
}
.testimonial {
  margin: 0 auto;
  padding: 0 2em;
}
.testimonial-wrapper {
  text-align: center;
  max-width: 950px;
  margin: 0 auto;
  border: 1px solid #e6e6e6;
  padding: 40px 25px;
  margin-top: 50px;
}
.testimonial-quote p {
  line-height: 1.5;
  font-weight: 300;
  margin-bottom: 25px;
  font-size: 1.375rem;
}
.testimonial-avatar {
  margin: -90px auto 30px;
  width: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0;
}
.testimonial-name {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1rem;
}
.testimonial-name span {
  font-weight: 400;
}

0 được kế thừa theo luật

/* src/styles.css */

body {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  font-size: 1rem;
  font-weight: 1.5;
  line-height: 1.5;
  color: #292b2c;
  background-color: #fff;
}
.testimonial {
  margin: 0 auto;
  padding: 0 2em;
}
.testimonial-wrapper {
  text-align: center;
  max-width: 950px;
  margin: 0 auto;
  border: 1px solid #e6e6e6;
  padding: 40px 25px;
  margin-top: 50px;
}
.testimonial-quote p {
  line-height: 1.5;
  font-weight: 300;
  margin-bottom: 25px;
  font-size: 1.375rem;
}
.testimonial-avatar {
  margin: -90px auto 30px;
  width: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0;
}
.testimonial-name {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1rem;
}
.testimonial-name span {
  font-weight: 400;
}

1 và

/* src/styles.css */

body {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  font-size: 1rem;
  font-weight: 1.5;
  line-height: 1.5;
  color: #292b2c;
  background-color: #fff;
}
.testimonial {
  margin: 0 auto;
  padding: 0 2em;
}
.testimonial-wrapper {
  text-align: center;
  max-width: 950px;
  margin: 0 auto;
  border: 1px solid #e6e6e6;
  padding: 40px 25px;
  margin-top: 50px;
}
.testimonial-quote p {
  line-height: 1.5;
  font-weight: 300;
  margin-bottom: 25px;
  font-size: 1.375rem;
}
.testimonial-avatar {
  margin: -90px auto 30px;
  width: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0;
}
.testimonial-name {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1rem;
}
.testimonial-name span {
  font-weight: 400;
}

2

làm tổ. Thay vì viết nhiều quy tắc bắt đầu bằng cùng một bộ chọn, bạn có thể lồng chúng

Trong

/* src/styles.css */

body {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  font-size: 1rem;
  font-weight: 1.5;
  line-height: 1.5;
  color: #292b2c;
  background-color: #fff;
}
.testimonial {
  margin: 0 auto;
  padding: 0 2em;
}
.testimonial-wrapper {
  text-align: center;
  max-width: 950px;
  margin: 0 auto;
  border: 1px solid #e6e6e6;
  padding: 40px 25px;
  margin-top: 50px;
}
.testimonial-quote p {
  line-height: 1.5;
  font-weight: 300;
  margin-bottom: 25px;
  font-size: 1.375rem;
}
.testimonial-avatar {
  margin: -90px auto 30px;
  width: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0;
}
.testimonial-name {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1rem;
}
.testimonial-name span {
  font-weight: 400;
}

2 , chúng tôi sử dụng bộ chọn lồng nhau để nhắm mục tiêu phần tử

/* src/styles.css */

body {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  font-size: 1rem;
  font-weight: 1.5;
  line-height: 1.5;
  color: #292b2c;
  background-color: #fff;
}
.testimonial {
  margin: 0 auto;
  padding: 0 2em;
}
.testimonial-wrapper {
  text-align: center;
  max-width: 950px;
  margin: 0 auto;
  border: 1px solid #e6e6e6;
  padding: 40px 25px;
  margin-top: 50px;
}
.testimonial-quote p {
  line-height: 1.5;
  font-weight: 300;
  margin-bottom: 25px;
  font-size: 1.375rem;
}
.testimonial-avatar {
  margin: -90px auto 30px;
  width: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0;
}
.testimonial-name {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1rem;
}
.testimonial-name span {
  font-weight: 400;
}

4 bên trong nó

Bạn có thể tìm phiên bản hoạt động của ứng dụng React với SCSS tại đây

👍 Ưu điểm

Bao gồm nhiều tính năng CSS động như mở rộng, lồng và trộn
Các kiểu CSS có thể được viết với ít bản soạn sẵn hơn nhiều so với CSS đơn giản

👎 Nhược điểm

Giống như CSS đơn giản, các kiểu có tính toàn cầu và không nằm trong phạm vi của bất kỳ thành phần nào
Các biểu định kiểu CSS đang bắt đầu bao gồm một số tính năng mà SASS chỉ có, chẳng hạn như các biến CSS (không nhất thiết là một kẻ lừa đảo, nhưng đáng chú ý)

SASS/SCSS thường yêu cầu thiết lập, chẳng hạn như cài đặt thư viện Node

/* src/styles.css */

body {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  font-size: 1rem;
  font-weight: 1.5;
  line-height: 1.5;
  color: #292b2c;
  background-color: #fff;
}
.testimonial {
  margin: 0 auto;
  padding: 0 2em;
}
.testimonial-wrapper {
  text-align: center;
  max-width: 950px;
  margin: 0 auto;
  border: 1px solid #e6e6e6;
  padding: 40px 25px;
  margin-top: 50px;
}
.testimonial-quote p {
  line-height: 1.5;
  font-weight: 300;
  margin-bottom: 25px;
  font-size: 1.375rem;
}
.testimonial-avatar {
  margin: -90px auto 30px;
  width: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0;
}
.testimonial-name {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1rem;
}
.testimonial-name span {
  font-weight: 400;
}

5

Mô-đun CSS

Các mô-đun CSS là một giải pháp thay thế nhỏ khác cho những thứ như CSS hoặc SASS

Điều tuyệt vời về các mô-đun CSS là chúng có thể được sử dụng với CSS hoặc SASS thông thường. Ngoài ra, nếu bạn đang sử dụng Tạo ứng dụng React, bạn có thể bắt đầu sử dụng các mô-đun CSS mà không cần thiết lập gì cả

Đây là ứng dụng của chúng tôi được viết bằng các mô-đun CSS

const styles = {
  section: {
    fontFamily: "-apple-system",
    fontSize: "1rem",
    fontWeight: 1.5,
    lineHeight: 1.5,
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 2em"
  },
  wrapper: {
    textAlign: "center",
    maxWidth: "950px",
    margin: "0 auto",
    border: "1px solid #e6e6e6",
    padding: "40px 25px",
    marginTop: "50px"
  },
  avatar: {
    margin: "-90px auto 30px",
    width: "100px",
    borderRadius: "50%",
    objectFit: "cover",
    marginBottom: "0"
  },
  quote: {
    lineHeight: 1.5,
    fontWeight: 300,
    marginBottom: "25px",
    fontSize: "1.375rem"
  },
  name: {
    marginBottom: "0",
    fontWeight: 600,
    fontSize: "1rem"
  },
  position: { fontWeight: 400 }
};

export default function App() {
  return (
    
      
        
        
          
            This is one of the best developer blogs on the planet! I read it
            daily to improve my skills.
          
        
        
          Tammy Stevens
           · Front End Developer
        
      
    
  );
}

1

const styles = {
  section: {
    fontFamily: "-apple-system",
    fontSize: "1rem",
    fontWeight: 1.5,
    lineHeight: 1.5,
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 2em"
  },
  wrapper: {
    textAlign: "center",
    maxWidth: "950px",
    margin: "0 auto",
    border: "1px solid #e6e6e6",
    padding: "40px 25px",
    marginTop: "50px"
  },
  avatar: {
    margin: "-90px auto 30px",
    width: "100px",
    borderRadius: "50%",
    objectFit: "cover",
    marginBottom: "0"
  },
  quote: {
    lineHeight: 1.5,
    fontWeight: 300,
    marginBottom: "25px",
    fontSize: "1.375rem"
  },
  name: {
    marginBottom: "0",
    fontWeight: 600,
    fontSize: "1rem"
  },
  position: { fontWeight: 400 }
};

export default function App() {
  return (
    
      
        
        
          
            This is one of the best developer blogs on the planet! I read it
            daily to improve my skills.
          
        
        
          Tammy Stevens
           · Front End Developer
        
      
    
  );
}

2

Tệp CSS của chúng tôi có tên

/* src/styles.css */

body {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  font-size: 1rem;
  font-weight: 1.5;
  line-height: 1.5;
  color: #292b2c;
  background-color: #fff;
}
.testimonial {
  margin: 0 auto;
  padding: 0 2em;
}
.testimonial-wrapper {
  text-align: center;
  max-width: 950px;
  margin: 0 auto;
  border: 1px solid #e6e6e6;
  padding: 40px 25px;
  margin-top: 50px;
}
.testimonial-quote p {
  line-height: 1.5;
  font-weight: 300;
  margin-bottom: 25px;
  font-size: 1.375rem;
}
.testimonial-avatar {
  margin: -90px auto 30px;
  width: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0;
}
.testimonial-name {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1rem;
}
.testimonial-name span {
  font-weight: 400;
}

6 trước phần mở rộng

/* src/styles.css */

body {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  font-size: 1rem;
  font-weight: 1.5;
  line-height: 1.5;
  color: #292b2c;
  background-color: #fff;
}
.testimonial {
  margin: 0 auto;
  padding: 0 2em;
}
.testimonial-wrapper {
  text-align: center;
  max-width: 950px;
  margin: 0 auto;
  border: 1px solid #e6e6e6;
  padding: 40px 25px;
  margin-top: 50px;
}
.testimonial-quote p {
  line-height: 1.5;
  font-weight: 300;
  margin-bottom: 25px;
  font-size: 1.375rem;
}
.testimonial-avatar {
  margin: -90px auto 30px;
  width: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0;
}
.testimonial-name {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1rem;
}
.testimonial-name span {
  font-weight: 400;
}

7. Bất kỳ tệp mô-đun CSS nào cũng phải có tên "mô-đun" trong đó và kết thúc bằng phần mở rộng thích hợp (nếu chúng tôi đang sử dụng CSS hoặc SASS/SCSS)

Điều thú vị cần lưu ý nếu chúng ta xem đoạn mã trên là các mô-đun CSS được viết giống như CSS bình thường, nhưng được nhập và sử dụng như thể nó được tạo dưới dạng đối tượng (kiểu nội tuyến)

Lợi ích của các mô-đun CSS là nó giúp chúng ta tránh được vấn đề xung đột lớp với CSS thông thường. Các thuộc tính mà chúng tôi đang tham chiếu biến thành các tên lớp duy nhất không thể xung đột với nhau khi dự án của chúng tôi được xây dựng

Các phần tử HTML được tạo của chúng tôi sẽ trông như thế này

const styles = {
  section: {
    fontFamily: "-apple-system",
    fontSize: "1rem",
    fontWeight: 1.5,
    lineHeight: 1.5,
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 2em"
  },
  wrapper: {
    textAlign: "center",
    maxWidth: "950px",
    margin: "0 auto",
    border: "1px solid #e6e6e6",
    padding: "40px 25px",
    marginTop: "50px"
  },
  avatar: {
    margin: "-90px auto 30px",
    width: "100px",
    borderRadius: "50%",
    objectFit: "cover",
    marginBottom: "0"
  },
  quote: {
    lineHeight: 1.5,
    fontWeight: 300,
    marginBottom: "25px",
    fontSize: "1.375rem"
  },
  name: {
    marginBottom: "0",
    fontWeight: 600,
    fontSize: "1rem"
  },
  position: { fontWeight: 400 }
};

export default function App() {
  return (
    
      
        
        
          
            This is one of the best developer blogs on the planet! I read it
            daily to improve my skills.
          
        
        
          Tammy Stevens
           · Front End Developer
        
      
    
  );
}

0

Ngoài ra, các mô-đun CSS giải quyết vấn đề về phạm vi toàn cầu trong CSS. So với các biểu định kiểu CSS thông thường của chúng tôi, CSS được khai báo bằng cách sử dụng các mô-đun cho các thành phần riêng lẻ sẽ không phân tầng thành các thành phần con

Do đó, các mô-đun CSS tốt nhất nên sử dụng trên CSS và SASS để đảm bảo các lớp không xung đột và viết các kiểu có thể dự đoán chỉ áp dụng cho một hoặc một thành phần khác

👍 Ưu điểm

Các kiểu nằm trong phạm vi của một hoặc một thành phần khác (không giống như CSS/SASS)
Các tên lớp được tạo, duy nhất đảm bảo không có xung đột về kiểu
Có thể sử dụng chúng ngay lập tức mà không cần thiết lập trong các dự án CRA
Có thể được sử dụng với SASS/CSS

👎 Nhược điểm

Có thể khó để tham khảo tên lớp
Có thể là một đường cong học tập để sử dụng các kiểu CSS như thuộc tính đối tượng

CSS-in-JS

Tương tự như cách React cho phép chúng tôi viết HTML dưới dạng JavaScript với JSX, CSS-in-JS đã làm điều gì đó tương tự với CSS

CSS-in-JS cho phép chúng tôi viết các kiểu CSS trực tiếp trong javascript của các thành phần của chúng tôi (. js) tập tin

Nó không chỉ cho phép bạn viết các quy tắc kiểu CSS mà không cần phải tạo một. css, nhưng các kiểu này nằm trong phạm vi các thành phần riêng lẻ

Nói cách khác, bạn có thể thêm, thay đổi hoặc xóa CSS mà không gặp bất kỳ sự cố nào. Thay đổi kiểu của một thành phần sẽ không ảnh hưởng đến kiểu của phần còn lại trong ứng dụng của bạn

CSS-in-JS thường sử dụng một loại hàm JavaScript đặc biệt được gọi là mẫu được gắn thẻ theo nghĩa đen. Điều tuyệt vời ở đây là chúng ta vẫn có thể viết các quy tắc kiểu CSS đơn giản trực tiếp trong JS của mình

Đây là một ví dụ nhanh về thư viện CSS-in-JS phổ biến, Styled Components

const styles = {
  section: {
    fontFamily: "-apple-system",
    fontSize: "1rem",
    fontWeight: 1.5,
    lineHeight: 1.5,
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 2em"
  },
  wrapper: {
    textAlign: "center",
    maxWidth: "950px",
    margin: "0 auto",
    border: "1px solid #e6e6e6",
    padding: "40px 25px",
    marginTop: "50px"
  },
  avatar: {
    margin: "-90px auto 30px",
    width: "100px",
    borderRadius: "50%",
    objectFit: "cover",
    marginBottom: "0"
  },
  quote: {
    lineHeight: 1.5,
    fontWeight: 300,
    marginBottom: "25px",
    fontSize: "1.375rem"
  },
  name: {
    marginBottom: "0",
    fontWeight: 600,
    fontSize: "1rem"
  },
  position: { fontWeight: 400 }
};

export default function App() {
  return (
    
      
        
        
          
            This is one of the best developer blogs on the planet! I read it
            daily to improve my skills.
          
        
        
          Tammy Stevens
           · Front End Developer
        
      
    
  );
}

1

Lưu ý một vài điều ở đây.

Bạn có thể viết các kiểu CSS bình thường, nhưng có thể bao gồm các kiểu lồng nhau và các lớp giả (như di chuột)

Bạn có thể liên kết các kiểu với bất kỳ phần tử HTML hợp lệ nào, chẳng hạn như phần tử nút bên trên (xem

/* src/styles.css */

body {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  font-size: 1rem;
  font-weight: 1.5;
  line-height: 1.5;
  color: #292b2c;
  background-color: #fff;
}
.testimonial {
  margin: 0 auto;
  padding: 0 2em;
}
.testimonial-wrapper {
  text-align: center;
  max-width: 950px;
  margin: 0 auto;
  border: 1px solid #e6e6e6;
  padding: 40px 25px;
  margin-top: 50px;
}
.testimonial-quote p {
  line-height: 1.5;
  font-weight: 300;
  margin-bottom: 25px;
  font-size: 1.375rem;
}
.testimonial-avatar {
  margin: -90px auto 30px;
  width: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0;
}
.testimonial-name {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1rem;
}
.testimonial-name span {
  font-weight: 400;
}

8)

Bạn có thể tạo các thành phần mới với các kiểu được liên kết này. Xem cách sử dụng

/* src/styles.css */

body {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  font-size: 1rem;
  font-weight: 1.5;
  line-height: 1.5;
  color: #292b2c;
  background-color: #fff;
}
.testimonial {
  margin: 0 auto;
  padding: 0 2em;
}
.testimonial-wrapper {
  text-align: center;
  max-width: 950px;
  margin: 0 auto;
  border: 1px solid #e6e6e6;
  padding: 40px 25px;
  margin-top: 50px;
}
.testimonial-quote p {
  line-height: 1.5;
  font-weight: 300;
  margin-bottom: 25px;
  font-size: 1.375rem;
}
.testimonial-avatar {
  margin: -90px auto 30px;
  width: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0;
}
.testimonial-name {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1rem;
}
.testimonial-name span {
  font-weight: 400;
}

9 trong thành phần Ứng dụng của chúng tôi

Vì đây là một thành phần, nó có thể được truyền vào đạo cụ không? . Chúng tôi có thể xuất thành phần này và sử dụng nó ở bất cứ đâu trong ứng dụng của chúng tôi mà chúng tôi muốn, đồng thời cung cấp cho nó các tính năng động thông qua các đạo cụ

Giả sử bạn muốn một biến thể đảo ngược của

/* src/styles.css */

body {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  font-size: 1rem;
  font-weight: 1.5;
  line-height: 1.5;
  color: #292b2c;
  background-color: #fff;
}
.testimonial {
  margin: 0 auto;
  padding: 0 2em;
}
.testimonial-wrapper {
  text-align: center;
  max-width: 950px;
  margin: 0 auto;
  border: 1px solid #e6e6e6;
  padding: 40px 25px;
  margin-top: 50px;
}
.testimonial-quote p {
  line-height: 1.5;
  font-weight: 300;
  margin-bottom: 25px;
  font-size: 1.375rem;
}
.testimonial-avatar {
  margin: -90px auto 30px;
  width: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0;
}
.testimonial-name {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1rem;
}
.testimonial-name span {
  font-weight: 400;
}

9 ở trên với nền và văn bản đảo ngược. Không vấn đề gì

Truyền prop51 cho nút thứ hai của chúng tôi và trong

/* src/styles.css */

body {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  font-size: 1rem;
  font-weight: 1.5;
  line-height: 1.5;
  color: #292b2c;
  background-color: #fff;
}
.testimonial {
  margin: 0 auto;
  padding: 0 2em;
}
.testimonial-wrapper {
  text-align: center;
  max-width: 950px;
  margin: 0 auto;
  border: 1px solid #e6e6e6;
  padding: 40px 25px;
  margin-top: 50px;
}
.testimonial-quote p {
  line-height: 1.5;
  font-weight: 300;
  margin-bottom: 25px;
  font-size: 1.375rem;
}
.testimonial-avatar {
  margin: -90px auto 30px;
  width: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0;
}
.testimonial-name {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1rem;
}
.testimonial-name span {
  font-weight: 400;
}

9, bạn có thể truy cập tất cả các props được truyền cho thành phần bằng cách sử dụng cú pháp

// src/App.js

import "./styles.css";

export default function App() {
  return (
    
      
        
        
          
            This is one of the best developer blogs on the planet! I read it daily to improve my skills.
          
        
        
          Tammy Stevens · Front End Developer
        
      
    
  );
}

3 với một hàm bên trong

const styles = {
  section: {
    fontFamily: "-apple-system",
    fontSize: "1rem",
    fontWeight: 1.5,
    lineHeight: 1.5,
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 2em"
  },
  wrapper: {
    textAlign: "center",
    maxWidth: "950px",
    margin: "0 auto",
    border: "1px solid #e6e6e6",
    padding: "40px 25px",
    marginTop: "50px"
  },
  avatar: {
    margin: "-90px auto 30px",
    width: "100px",
    borderRadius: "50%",
    objectFit: "cover",
    marginBottom: "0"
  },
  quote: {
    lineHeight: 1.5,
    fontWeight: 300,
    marginBottom: "25px",
    fontSize: "1.375rem"
  },
  name: {
    marginBottom: "0",
    fontWeight: 600,
    fontSize: "1rem"
  },
  position: { fontWeight: 400 }
};

export default function App() {
  return (
    
      
        
        
          
            This is one of the best developer blogs on the planet! I read it
            daily to improve my skills.
          
        
        
          Tammy Stevens
           · Front End Developer
        
      
    
  );
}

2

Ở phần trả về của hàm, bạn có thể chọn giá đỡ

// src/App.js

import "./styles.css";

export default function App() {
  return (
    
      
        
        
          
            This is one of the best developer blogs on the planet! I read it daily to improve my skills.
          
        
        
          Tammy Stevens · Front End Developer
        
      
    
  );
}

1 và sử dụng một ternary để xác định màu của nền và văn bản một cách có điều kiện

Đây là kết quả

Có rất nhiều lợi ích khi sử dụng thư viện CSS-in-JS để định kiểu cho các ứng dụng React của bạn (quá nhiều để trình bày ở đây), một số lợi ích mà tôi sẽ liệt kê bên dưới

Hãy chắc chắn kiểm tra hai thư viện CSS-in-JS phổ biến nhất cho React. Các thành phần cảm xúc và kiểu dáng

Một nhược điểm khi sử dụng thư viện CSS-in-JS là thêm thư viện bổ sung vào dự án của bạn. Tuy nhiên, tôi cho rằng điều này dễ dàng xứng đáng với trải nghiệm nhà phát triển được cải thiện mà bạn có khi tạo kiểu cho ứng dụng React của mình so với CSS đơn giản

👍 Ưu điểm

CSS-in-JS có thể dự đoán được – các kiểu được đặt trong phạm vi các thành phần riêng lẻ
Vì CSS của chúng ta bây giờ là JS, nên chúng ta có thể xuất, sử dụng lại và thậm chí mở rộng các kiểu của mình thông qua các đạo cụ
Các thư viện CSS-in-JS đảm bảo không có xung đột về kiểu dáng bằng cách tạo các tên lớp duy nhất cho các kiểu viết của bạn
Không cần tập trung vào các quy ước đặt tên cho các lớp của bạn, chỉ cần viết các kiểu

👎 Nhược điểm

Không giống như CSS đơn giản, bạn sẽ cần cài đặt một hoặc nhiều thư viện JavaScript của bên thứ ba, thư viện này sẽ tăng thêm trọng lượng cho dự án đã xây dựng của bạn

Phần kết luận

Lưu ý rằng tôi không bao gồm các thư viện thành phần trong phần so sánh này. Tôi muốn tập trung chủ yếu vào các cách khác nhau để tự sáng tác các phong cách

Xin lưu ý rằng việc chọn một thư viện có các thành phần và kiểu được tạo sẵn như Material UI hoặc Ant Design (để đặt tên cho một vài) là một lựa chọn hoàn toàn hợp lệ cho dự án của bạn

Tôi hy vọng hướng dẫn này đã giúp bạn hiểu rõ về cách tạo kiểu cho ứng dụng React của mình cùng với cách tiếp cận để chọn cho dự án tiếp theo của bạn

Muốn phần còn lại?

React Bootcamp lấy mọi thứ bạn nên biết về việc học React và gói nó thành một gói toàn diện, bao gồm video, cheatsheet, cộng với phần thưởng đặc biệt

Có được thông tin nội bộ Hàng trăm nhà phát triển đã sử dụng để thành thạo React, tìm được công việc mơ ước và kiểm soát tương lai của họ

Nhấn vào đây để được thông báo khi nó mở ra

QUẢNG CÁO

xà lan lau sậy

Nhà phát triển phản ứng thích tạo ra các ứng dụng đáng kinh ngạc. Hướng dẫn bạn cách React Bootcamp. com

Nếu bài viết này hữu ích, hãy tweet nó

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

React có phạm vi CSS không?

CSS trong phạm vi thành phần phù hợp để tránh xung đột tên lớp CSS. React Js cho phép bạn sử dụng các mô-đun CSS để giải quyết vấn đề này . Bạn có thể sử dụng các mô-đun CSS trong ứng dụng React Js của mình nếu phiên bản tập lệnh phản ứng của bạn là 2. 0 hoặc cao hơn.

Phạm vi của mô-đun CSS cho React là gì?

tệp css. Nó làm giảm phạm vi toàn cầu của kiểu dáng React . Ngoài ra, nó là một công cụ ngăn chặn phạm vi toàn cầu và xung đột bằng cách tạo một chuỗi ngẫu nhiên dưới dạng tên className và thêm một hàm băm duy nhất để làm cho mỗi className trở nên độc nhất. Chúng ta có thể ngăn xung đột không gian tên cho các lớp CSS bằng cách sử dụng Mô-đun CSS.

Tôi có thể sử dụng các biến CSS trong React không?

Có hai lý do để chuyển sang biến CSS trong ứng dụng React của bạn. Công thái học là tốt đẹp. Nó mở ra những khả năng mới. Bạn có thể làm những việc với các biến CSS mà JS không làm được .

CSS có phạm vi là gì?

Các. lớp giả CSS phạm vi đại diện cho các phần tử là điểm tham chiếu để các bộ chọn khớp với . /* Chọn một phần tử có phạm vi */. phạm vi { màu nền. Vôi; . phạm vi giống như. root , vì hiện tại không có cách nào để thiết lập rõ ràng một phần tử có phạm vi.

programming css

CSS có nằm trong phạm vi React không?

Những gì chúng ta sẽ mã hóa

Kiểu nội tuyến

CSS đơn giản

SASS / SCSS

Mô-đun CSS

CSS-in-JS

Phần kết luận

Muốn phần còn lại?

React có phạm vi CSS không?

Phạm vi của mô-đun CSS cho React là gì?

Tôi có thể sử dụng các biến CSS trong React không?

CSS có phạm vi là gì?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội