Lệnh composes cho các tệp trong CSS modules trong React
Lệnh composes cũng có thể được áp dụng để
tái sử dụng các kiểu từ một tệp
trong tệp khác.
Hãy quay lại với ứng dụng buttons,
mà chúng ta đã làm trong các bài học trước.
Giả sử chúng ta muốn thêm cho tất cả
các nút bấm cùng một bóng đổ, kiểu con trỏ
và font chữ đậm. Hãy để các kiểu này được
đặt trong tệp App.module.css.
Hãy mở tệp này và thêm vào
đầu tiên một lớp mới beauty với các
kiểu đó:
.beauty {
box-shadow: rgba(50, 50, 50, 0.2) 0 5px 5px 0;
font-weight: bold;
cursor: pointer;
}
Hãy áp dụng nó để tạo kiểu cho các nút bấm.
Để làm điều này, hãy mở Buttons.module.css và
thay đổi trong lớp common-btn.
Chúng ta sẽ thêm một dòng với lệnh composes,
trong đó chỉ định tên lớp beauty,
mà chúng ta muốn áp dụng và tệp
App.module.css, nơi chứa
lớp này:
.common-btn {
composes: beauty from "../App.module.css";
font-size: 16px;
border-radius: 3px;
}
Lấy mã ứng dụng của bạn từ bài tập trong bài học trước và tạo bóng đổ nào đó cho các ô nhập liệu của bạn bằng cách sử dụng phương pháp được trình bày trong bài học này.
