Perintah composes untuk file di CSS modules di React
Perintah composes juga dapat diterapkan untuk
menggunakan kembali gaya dari satu file
di file lain.
Mari kembali ke aplikasi buttons,
yang kita buat dalam pelajaran sebelumnya.
Anggaplah kita ingin menambahkan bayangan yang sama,
gaya kursor, dan font tebal untuk semua tombol.
Biarkan gaya-gaya ini berada
di file App.module.css.
Mari buka file tersebut dan tambahkan di
awalnya kelas baru beauty dengan
gaya-gaya ini:
.beauty {
box-shadow: rgba(50, 50, 50, 0.2) 0 5px 5px 0;
font-weight: bold;
cursor: pointer;
}
Mari terapkan untuk menata gaya tombol-tombol.
Untuk melakukan ini, buka Buttons.module.css dan
masukkan perubahan ke dalam kelas common-btn.
Kita akan menambahkan baris dengan perintah composes,
di mana kita menentukan nama kelas beauty,
yang ingin kita terapkan dan file
App.module.css, di mana kelas ini berada:
.common-btn {
composes: beauty from "../App.module.css";
font-size: 16px;
border-radius: 3px;
}
Ambil kode aplikasi Anda dari tugas di pelajaran sebelumnya dan buatlah beberapa bayangan untuk input Anda menggunakan cara yang diberikan dalam pelajaran ini.