Apa itu MUI dan Bagaimana Cara Menggunakannya di Proyek ReactJS Anda?

Pada September 2021, perusahaan yang sebelumnya bernama Material-UI berubah nama menjadi MUI. Perubahan ini terjadi terutama karena banyak orang tidak dapat membedakan Material-UI dari Material Design (sistem desain).

MUI dimulai sebagai implementasi Desain Material yang disesuaikan untuk aplikasi React. Saat ini merek tersebut berkembang dan ingin menciptakan sistem desain baru, yang akan menjadi alternatif dari Desain Material.

Akronim MUI berarti Material untuk membangun UI, dan dalam artikel ini, Anda akan belajar dengan tepat bagaimana menggunakan MUI untuk membangun React UI.

Bagaimana Cara Mengakses MUI di React?

MUI tersedia sebagai paket npm. Oleh karena itu, yang perlu Anda lakukan untuk mengaksesnya adalah mengeksekusi baris kode berikut dalam proyek React Anda:

npm install @mui/material @emotion/react @emotion/styled

Dengan asumsi bahwa Anda sudah diinstal Bereaksi di perangkat Anda, Anda memiliki akses lengkap ke perpustakaan MUI dan semua komponennya. MUI memiliki lebih dari seratus komponen berbeda yang termasuk dalam salah satu kategori berikut:

• Masukan
• Tampilan Data
• Masukan
• permukaan
• Navigasi
• Tata Letak
• Utilitas
• Kisi Data
• Tanggal Waktu

Setelah menginstal MUI sebagai paket npm, menggunakan perpustakaan dalam proyek Anda semudah mengimpor komponen yang diperlukan dalam file yang sesuai dan memasukkan preferensi gaya Anda di lokasi tertentu di seluruh UI.

Jika Anda ingin membuat halaman masuk untuk aplikasi React Anda, ada beberapa komponen MUI yang dapat Anda gunakan yang akan menghemat waktu dan membantu Anda membuat desain yang bersih.

Membuat Komponen Masuk React

Untuk membuat komponen baru di React, cukup navigasikan ke folder src React dan buat folder komponen baru. Folder komponen dapat menjadi rumah bagi semua komponen Anda, dimulai dengan komponen masuk.

Terkait: Apa Itu ReactJS, dan Apa Kegunaannya?

File Signin.js

impor Bereaksi dari 'bereaksi';
fungsi Masuk() {
kembali (

);
}
ekspor Masuk default;

Setelah membuat komponen masuk Anda, saatnya untuk menautkannya ke aplikasi React Anda dengan mengimpornya ke komponen aplikasi Anda (terletak di dalam folder src).

File App.js yang Diperbarui

impor Bereaksi dari 'bereaksi';
impor Masuk dari './components/Signin';
fungsi Aplikasi() {
kembali (






);
}
ekspor Aplikasi default;

Sekarang Anda dapat mulai menjelajahi komponen MUI yang ingin Anda gunakan di halaman masuk Anda.

Apa itu Komponen Tipografi?

Komponen tipografi termasuk dalam kategori tampilan data MUI dan memiliki tiga belas varian bawaan. Ini termasuk:

• h1
• h2
• h3
• h4
• h5
• h6
• subjudul1
• subjudul2
• tubuh1
• tubuh2
• tombol
• keterangan
• garis besar

Varian yang Anda pilih harus bergantung pada teks yang ingin Anda tampilkan. Misalnya, jika Anda ingin menampilkan heading, Anda bebas menggunakan salah satu dari enam varian heading di UI Anda. Cukup masukkan penyangga varian dan nilai yang dipilih dalam komponen tipografi.

Menggunakan Contoh Komponen Tipografi

impor Bereaksi dari 'bereaksi';
impor Tipografi dari '@mui/material/Tipografi';
fungsi Masuk() {
kembali (


 Masuk 



);
}
ekspor Masuk default;

Hal penting yang dapat diambil dari kode di atas adalah setiap kali Anda memasukkan komponen baru ke dalam UI Anda, Anda juga harus mengimpornya di bagian atas file komponen React Anda. Memperbarui komponen masuk Anda dengan komponen tipografi (seperti yang terlihat pada kode di atas) akan menghasilkan output berikut di browser Anda:

Apa itu Komponen Bidang Teks?

Komponen bidang teks termasuk dalam kategori input. Komponen ini memiliki dua fungsi sederhana; itu memungkinkan pengguna untuk memasukkan atau mengedit teks di UI. Komponen bidang teks menggunakan tiga varian, yaitu outline, fill, dan standar, dengan varian outline sebagai default. Oleh karena itu, jika Anda ingin menggunakan komponen bidang teks default, Anda tidak perlu menyertakan prop varian. Komponen bidang teks juga menggunakan beberapa alat peraga lain, termasuk label, diperlukan, jenis, id, dinonaktifkan, dll.

Menggunakan Contoh Komponen Bidang Teks

impor Bereaksi dari 'bereaksi';
impor TextField dari '@mui/material/TextField';
impor Tipografi dari '@mui/material/Tipografi';
fungsi Masuk() {
kembali (


 Masuk 
label="Alamat Email"
yg dibutuhkan
id="email"
nama="email"
/>
label="Kata Sandi"
yg dibutuhkan
id = "kata sandi"
nama = "kata sandi"
ketik = "kata sandi"
/>



);
}
ekspor Masuk default;

Kode di atas akan menghasilkan output berikut di browser Anda:

Seperti namanya, komponen tautan berfungsi dengan cara yang sama seperti tautan CSS biasa. Itu termasuk dalam kategori navigasi dan memiliki href tradisional dan alat peraga target. Selain itu, ia memiliki warna, varian, dan penyangga garis bawah.

Terkait: Cara Menggunakan Alat Peraga di ReactJS

Namun, tidak perlu menggunakan alat peraga tambahan apa pun kecuali Anda ingin tautan Anda terlihat unik. Misalnya, nilai default dari prop garis bawah adalah "selalu" dan dua nilai lain yang dapat Anda tetapkan untuk prop adalah "none" dan "hover."

Oleh karena itu, Anda hanya perlu menyertakan prop garis bawah di komponen Anda saat Anda tidak menginginkan garis bawah atau saat Anda menginginkannya memiliki status melayang.

lupa Password?

Memasukkan kode di atas ke dalam komponen sign-in yang ada akan menghasilkan output berikut di browser Anda:

Apa itu Komponen Tombol?

Komponen tombol juga termasuk dalam kategori input dan mematuhi fungsionalitas tombol umum yang mengomunikasikan tindakan pengguna ke aplikasi Anda. Komponen ini menggunakan salah satu dari tiga varian (teks, tertampung, dan kerangka), dan setiap varian dapat muncul di salah satu dari tiga status—utama, dinonaktifkan, dan tertaut.

Varian default komponen tombol adalah teks. Oleh karena itu, jika Anda menginginkan tombol yang ditampung atau diuraikan, Anda harus menggunakan varian prop untuk menunjukkannya. Selain penyangga varian, komponen tombol juga memiliki pengendali onclick dan penyangga warna—antara lain.

Menggunakan Contoh Komponen Tombol

 Masuk

Memasukkan kode di atas ke dalam komponen masuk Anda akan memperbarui UI Anda agar terlihat seperti berikut:

Sekarang Anda memiliki tombol interaktif yang melayang ketika mouse berjalan di atasnya. Tetapi semua komponennya horizontal, dan tidak terlihat bagus.

Apa itu Komponen Kotak?

Komponen kotak adalah apa yang Anda butuhkan untuk mengatur komponen utilitas (seperti komponen tombol) di aplikasi React Anda. Komponen kotak menggunakan prop ansx, yang memiliki akses ke semua properti sistem (seperti tinggi dan lebar) yang Anda perlukan untuk mengatur komponen di UI Anda.

Menggunakan Contoh Komponen Kotak

impor Bereaksi dari 'bereaksi';
impor Tautan dari '@mui/material/Link';
impor TextField dari '@mui/material/TextField';
impor Tipografi dari '@mui/material/Tipografi';
import { Button, Box } dari '@mui/material';
fungsi Masuk() {
kembali (


sx={{
saya: 8,
tampilan: 'fleksi',
flexDirection: 'kolom',
alignItems: 'pusat',
}}>
 Masuk 
label="Alamat Email"
yg dibutuhkan
id="email"
nama="email"
batas = "biasa"
/>
label="Kata Sandi"
yg dibutuhkan
id = "kata sandi"
nama = "kata sandi"
ketik = "kata sandi"
batas = "biasa"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
lupa Password?

varian="berisi"
sx={{mt: 2}}
>
Masuk





);
}
ekspor Masuk default;

Dengan membungkus komponen kotak di sekitar komponen utilitas (dan menggunakan prop sx) dalam kode di atas, Anda akan secara efektif membuat struktur kolom fleksibel. Kode di atas akan menghasilkan halaman masuk React berikut di browser Anda:

Apa Itu Komponen Grid MUI?

Komponen grid adalah komponen MUI lain yang berguna untuk dipelajari. Itu termasuk dalam kategori tata letak MUI dan memfasilitasi daya tanggap. Ini memungkinkan pengembang untuk mencapai desain responsif karena sistem tata letak 12 kolomnya. Sistem tata letak ini menggunakan lima breakpoint default MUI untuk membuat aplikasi yang beradaptasi dengan ukuran layar apa pun. Breakpoint ini meliputi:

• xs (ekstra-kecil dan mulai dari 0px)
• sm (kecil dan mulai dari 600px)
• md (sedang dan mulai dari 900px)
• lg (besar dan mulai dari 1200px)
• xl (ekstra-besar dan mulai dari 1536px)

Komponen MUIgrid bekerja dengan cara yang sama seperti properti flexbox CSS karena memiliki sistem induk-anak searah berdasarkan dua jenis tata letak—wadah (induk) dan item (anak). Namun, komponen grid MUI memfasilitasi grid bersarang, di mana item juga bisa menjadi wadah.

Jelajahi Opsi Styling Lainnya untuk Aplikasi ReactJS

Artikel ini mengajarkan Anda cara menginstal dan menggunakan perpustakaan MUI di aplikasi React Anda. Anda mempelajari cara menggunakan beberapa komponen dasar (seperti tipografi) dan beberapa komponen struktural yang lebih maju (seperti komponen kotak).

Pustaka MUI mudah digunakan, efektif, dan berfungsi baik dengan aplikasi React. Tapi itu tidak berarti itu satu-satunya pilihan gaya yang tersedia untuk pengembang Bereaksi. Jika Anda sedang membangun aplikasi React, Anda bebas menggunakan pustaka MUI atau kerangka kerja CSS apa pun untuk menata aplikasi Anda.

Kadeisha Kean (33 Artikel Diterbitkan)

Kadeisha Kean adalah Pengembang Perangkat Lunak Full-Stack dan Penulis Teknis/Teknologi. Dia memiliki kemampuan yang berbeda untuk menyederhanakan beberapa konsep teknologi yang paling kompleks; menghasilkan materi yang dapat dengan mudah dipahami oleh setiap pemula teknologi. Dia bersemangat menulis, mengembangkan perangkat lunak yang menarik, dan berkeliling dunia (melalui film dokumenter).

More From Kadeisha Kean