Hướng dẫn react css not applying - phản ứng css không áp dụng

Tôi đang xây dựng một ứng dụng React với phản ứng tĩnh.

Mỗi thành phần có cấu trúc thư mục như thế này:

MyComponent/
-- MyComponent.css
-- MyComponent.js
-- package.json

Và trong tệp

body { background-color: orange; }
.card { background-color: purple; }

body { background-color: orange; }
.card { background-color: purple; }

Giả sử CSS của tôi chứa một cái gì đó như thế này:

body { background-color: orange; }
.card { background-color: purple; }

và hàm kết xuất trong thành phần của tôi hiển thị thẻ:

render[] {
  return [
    
Hello World
  ];
}

Cơ thể của trang sẽ trở thành màu cam, nhưng thẻ sẽ không trở nên màu tím.

Tại sao CSS này không được áp dụng đầy đủ cho HTML được tạo ra?

Hỏi ngày 13 tháng 4 năm 2017 lúc 18:28Apr 13, 2017 at 18:28

3

Theo trang web của React Static Boilerplate, họ sử dụng các mô -đun CSS - điều này sẽ giải thích lý do tại sao thẻ

body { background-color: orange; }
.card { background-color: purple; }

//github.com/css-modules/css-modules

Hãy thử nhập bảng kiểu như vậy:

body { background-color: orange; }
.card { background-color: purple; }

Việc sử dụng nó trong thành phần của bạn như vậy:

render[] {
  return [
    
Hello World
  ];
}

Đã trả lời ngày 13 tháng 4 năm 2017 lúc 19:33Apr 13, 2017 at 19:33

TobytobyToby

12.2k7 Huy hiệu vàng43 Huy hiệu bạc74 Huy hiệu đồng7 gold badges43 silver badges74 bronze badges

4

Tôi đã gặp vấn đề với CSS không được áp dụng, nhưng đó không phải là mô -đun, cuối cùng nó là cú pháp áp dụng nhiều lớp. Cú pháp dưới đây đã giải quyết vấn đề

 some content 

Đã trả lời ngày 30 tháng 11 năm 2017 lúc 15:22Nov 30, 2017 at 15:22

Tôi bắt gặp một quan sát rằng lỗi đánh máy đã không bị phát hiện, đó là lý do tại sao nó không được áp dụng. Hãy xem bên dưới HTML:

Bây giờ khi trang của tôi được hiển thị, các thuộc tính

render[] {
  return [
    
Hello World
  ];
}

render[] {
  return [
    
Hello World
  ];
}

render[] {
  return [
    
Hello World
  ];
}

Sau đó, tôi nhận ra rằng chính tả của

render[] {
  return [
    
Hello World
  ];
}

Hy vọng thông tin này sẽ giúp ai đó!

Đã trả lời ngày 7 tháng 3 năm 2019 lúc 10:41Mar 7, 2019 at 10:41

RBTRBTRBT

22.5K20 Huy hiệu vàng154 Huy hiệu bạc222 Huy hiệu đồng20 gold badges154 silver badges222 bronze badges

Tôi biết lý do tại sao nó không được áp dụng. Phải có một nơi nào đó trong trang web của bạn, bạn đã áp dụng localIndentName prop. Điều này thực hiện băm của tên lớp của bạn và do đó, tên lớp băm được tiêm vào thẻ bởi trình tải kiểu nhưng trong DOM, bạn đã tải lớp chưa được tải. Tuân thủ này chỉ băm tên DOM khi bạn sử dụng kiểu CSS-Modules.

 {
                test: /\.[sa|sc|c]ss$/,
                use: [
                  argv.mode =='development' ? 'style-loader' : MiniCssExtractPlugin.loader,
                  {
                    loader: 'css-loader',
                    options: {
                    modules: true,//remove this or set to false
                    importLoaders: 1,
                    localIdentName: "[name]_[local]_[hash:base64:5]", //remove this 
                    }
                  },
                  'sass-loader'
                ]
            }

Đã trả lời ngày 26 tháng 4 năm 2019 lúc 8:37Apr 26, 2019 at 8:37

0xAnon0xAnon0xAnon

8178 Huy hiệu bạc19 Huy hiệu đồng8 silver badges19 bronze badges

Là một nhà phát triển Frontend, bạn cần hiểu tầm quan trọng của tệp CSS. Sai lầm có thể dễ dàng thực hiện trong khi nhập, lưu hoặc đặt tên tệp, có thể tạo lỗi trong quá trình biên dịch mã. Bạn phải luôn lưu tệp bên trong thư mục SRC khi trình biên dịch tự động tìm kiếm thông qua nó cho bất kỳ loại nhập tệp nào. Bạn có thể tham khảo React - Kiểu dáng và CSS trong các tài liệu React để biết thêm thông tin.

Giới thiệu

render[] {
  return [
    
Hello World
  ];
}

Các tệp CSS là các thành phần cốt lõi của dự án nhà phát triển Frontend. Chúng được sử dụng để tạo kiểu và thiết kế các trang web. CSS được sử dụng nội bộ trong các tệp HTML bằng thẻ

render[] {
  return [
    
Hello World
  ];
}

Trong hướng dẫn này, bạn sẽ tìm hiểu về các lỗi có thể xảy ra trong khi nhập tệp CSS vào tệp React của bạn.

Tổng quan

• CSS giúp tạo kiểu trang web, nhưng đôi khi mã có thể không được nhập đúng hoặc có thể hiển thị một vài lỗi trong khi nó đang được thực thi. Những lỗi này có thể phát sinh trong khi lưu, đặt tên hoặc nhập tệp. Có bốn điều có thể sai:
• Không lưu tệp trong thư mục nguồn
• Cung cấp đường dẫn sai trong khi nhập

  render[] {
    return [
      
  Hello World
    ];
  }
  

  6 or

  render[] {
    return [
      
  Hello World
    ];
  }
  

  7
• Tạo kiểu sai

  render[] {
    return [
      
  Hello World
    ];
  }
  

  6 hoặc

  render[] {
    return [
      
  Hello World
    ];
  }
  

  7

Mắc lỗi trong tên tệp

Chúng tôi sẽ đi qua từng tình huống này.

Các tệp chưa được lưu trong thư mục nguồn

render[] {
  return [
    
Hello World
  ];
}

render[] {
  return [
    
Hello World
  ];
}

Bên trong thư mục ứng dụng React, một số thư mục được lưu theo mặc định, chẳng hạn như mô-đun nút, công khai và nguồn. Khi tạo một chương trình, tất cả các mã HTML được lưu trong thư mục công khai và phần còn lại [

render[] {
  return [
    
Hello World
  ];
}

render[] {
  return [
    
Hello World
  ];
}

1import React, {Component} from 'react';
2import ReactDOM from 'react-dom';
3import '../CSS_Files/style.css';

JavaScript

Hãy xem xét một ví dụ: Giả sử bạn muốn tạo các thư mục riêng cho từng loại tệp: công khai cho các tệp HTML, SRC cho các tệp JavaScript và thư mục mới CSS_FILES cho các tệp CSS. Khi bạn chạy mã cuối cùng sau khi nhập tất cả các tệp cần thiết để kiểm tra, một lỗi sẽ hiển thị trên màn hình, không thể biên dịch: Không tìm thấy mô -đun. Dưới đây là mã để nhập tệp và lỗi tương ứng với mã:

1import React, {Component} from 'react';
2import ReactDOM from 'react-dom';
3import '../src/CSS_Files/style.css';

JavaScript

Lỗi này được tạo vì trình biên dịch chỉ có thể nhập các tệp từ thư mục SRC. Ở đây, tệp CSS được lưu bên ngoài thư mục SRC, vì vậy trình biên dịch không thể nhập nó. Để làm cho mã này hoạt động, bạn chỉ cần lưu tệp CSS bên trong thư mục SRC. Nhưng nếu bạn vẫn muốn tách các tệp, chỉ cần tạo một thư mục mới bên trong thư mục SRC. Dưới đây là mã chính xác để nhập tệp CSS.

Đường dẫn không chính xác trong quá trình nhập

1import React, {Component} from 'react';
2import ReactDOM from 'react-dom';
3import '.../src/CSS_Files/style.css';

JavaScript

Như bạn có thể thấy trong mã trên, vấn đề là đúng khi đường dẫn bắt đầu. Mặc dù khai báo một đường dẫn chỉ có hai dấu chấm, trong khi ở đây, ba chấm đã được sử dụng, điều này đang tạo ra lỗi. Dưới đây là mã chính xác để khai báo đường dẫn:

1import React, {Component} from 'react';
2import ReactDOM from 'react-dom';
3import '../src/CSS_Files/style.css';

JavaScript

Kiểu các thuộc tính sai

Trong tệp CSS, tất cả các kiểu dáng diễn ra bên trong các thuộc tính

render[] {
  return [
    
Hello World
  ];
}

render[] {
  return [
    
Hello World
  ];
}

render[] {
  return [
    
Hello World
  ];
}

render[] {
  return [
    
Hello World
  ];
}

render[] {
  return [
    
Hello World
  ];
}

render[] {
  return [
    
Hello World
  ];
}

render[] {
  return [
    
Hello World
  ];
}

render[] {
  return [
    
Hello World
  ];
}

Hãy xem xét một ví dụ: Giả sử bạn đang tạo một trang web với nhiều div và chỉ tạo kiểu ba div với ID sau: thứ nhất, thứ hai và thứ ba. Nhưng khi bạn chạy mã, bạn chỉ thấy một

 some content 

 some content 

body { background-color: orange; }
.card { background-color: purple; }

HTML

body { background-color: orange; }
.card { background-color: purple; }

CSS

body { background-color: orange; }
.card { background-color: purple; }

JavaScript

Trong mã trên, kiểu dáng của một số div là không đầy đủ. Điều này đã xảy ra bởi vì trang web chứa nhiều div mà trong khi tạo kiểu cho chúng, một trong số chúng đã kết thúc với một cái tên sai và một cái khác gặp lỗi chính tả. Tên div

 some content 

 some content 

 some content 

 some content 

 some content 

 some content 

body { background-color: orange; }
.card { background-color: purple; }

CSS

Trong mã trên, kiểu dáng của một số div là không đầy đủ. Điều này đã xảy ra bởi vì trang web chứa nhiều div mà trong khi tạo kiểu cho chúng, một trong số chúng đã kết thúc với một cái tên sai và một cái khác gặp lỗi chính tả. Tên div

 some content 

5 được trộn lẫn với tên div

 some content 

6 và div

 some content 

7 được đánh vần không chính xác. Dưới đây là mã CSS chính xác và kết quả:

Lỗi khi đặt tên một tệp

body { background-color: orange; }
.card { background-color: purple; }

JavaScript

Ngôn ngữ lập trình xử lý chữ hoa và chữ thường khác nhau. Hãy xem xét một ví dụ: Giả sử bạn có tệp CSS cho các yếu tố kiểu dáng. Lần này bạn đã làm mọi thứ một cách chính xác, nhưng vẫn, khi bạn chạy mã, một lỗi hiển thị. Dưới đây là mã được sử dụng để nhập tệp và lỗi tương ứng với mã:

 some content 

 some content 

1import React, {Component} from 'react';
2import ReactDOM from 'react-dom';
3import '../src/CSS_Files/style.css';

JavaScript

Bằng cách nhìn thấy lỗi, bạn có thể nhận ra có một vấn đề với tên của tệp. Khi bạn kiểm tra tên, bạn thấy rằng tệp được lưu là

 some content 

8, nhưng bạn đang nhập nó với tên

 some content 

9. Lỗi ở đây được tạo bởi vốn S khi bắt đầu tên tệp. Dưới đây là mã chính xác để nhập tệp:

Sự kết luận