Hướng dẫn css module reactjs - mô-đun css phản ứng
Đã đăng vào thg 8 21, 2019 3:41 SA 2 phút đọc 2 phút đọc 2 phút đọc Nếu bạn có kinh nghiệm làm việc với các stylesheets của các ứng dụng web lớn, source css cả trăm files, cả ngàn dòng, hàng chục ngàn tên class, thì vấn đề naming classes, các classes bị xung đột, overrides đôi khi trở nên cực kì quan trọng và có lúc bạn tốn tới hàng giờ để refactor lại component cũ chỉ để style component mới không bị ảnh hưởng tới các component đã style.naming classes, các classes bị xung đột, overrides đôi khi trở nên cực kì quan trọng và có lúc bạn tốn tới hàng giờ để refactor lại component cũ chỉ để style component mới không bị ảnh hưởng tới các component đã style.naming classes, các classes bị xung đột, overrides đôi khi trở nên cực kì quan trọng và có lúc bạn tốn tới hàng giờ để refactor lại component cũ chỉ để style component mới không bị ảnh hưởng tới các component đã style. Từ đó, CSS Modules ra đời 🎉 . Nó giúp chúng ta có thể module hoá stylesheet thành các file CSS nhỏ và scoped locally to the component (*)CSS Modules ra đời 🎉 . Nó giúp chúng ta có thể module hoá stylesheet thành các file CSS nhỏ và scoped locally to the component (*)CSS Modules ra đời 🎉 . Nó giúp chúng ta có thể module hoá stylesheet thành các file CSS nhỏ và scoped locally to the component (*) scoped locally to the component (*): nôm na là tất cả class name, selectors, animations trong css modules files sẽ chỉ hợp lệ ở component import nó và không ảnh hưởng tới thành phần các trong website. Ở bài viết này, chúng ta sẽ sử dụng CSS Modules trong React. Nếu bạn sử dụng create-react-app (v2) để setup ứng dụng react của bạn thì CSS Modules đã được setup sẵn.create-react-app (v2) để setup ứng dụng react của bạn thì CSS Modules đã được setup sẵn.create-react-app (v2) để setup ứng dụng react của bạn thì CSS Modules đã được setup sẵn. Vậy còn chờ gì nữa ? Give it a try. Sử dụng CSS Modules trong ReactBắt đầu với 1 component Logo được style bằng SASS và convert nó sang kiểu CSS Modules.
Style Component với CSS Modules:1.Tạo file CSS ModulesChúng ta sẽ tạo 1 file scss với dạng là
2.Import CSS ModulesImport styles ở trên vào Logo.js component. Biến logoStyles là 1 object chứa các CSS styles đã define ở trên. Từ đó chúng ta có thể get các classnames đã được create-react-app modular hoá (*) và sử dụng chúng trong JSX của Logo component.logoStyles là 1 object chứa các CSS styles đã define ở trên. Từ đó chúng ta có thể get các classnames đã được create-react-app modular hoá (*) và sử dụng chúng trong JSX của Logo component.logoStyles là 1 object chứa các CSS styles đã define ở trên. Từ đó chúng ta có thể get các classnames đã được create-react-app modular hoá (*) và sử dụng chúng trong JSX của Logo component.
Tìm hiểu kĩ hơn về CSS Modules: https://viblo.asia/p/tim-hieu-ve-css-modules-phan-1-E7bGoxl4v5e2 That's it 😄. Cám ơn các bạn đã theo dõi. Nguồn tham khảo: https://create-react-app.dev/docs/adding-a-css-modules-stylesheet All rights reserved |