Saat kita membuat UI website atau aplikasi untuk suatu perusahaan, tentunya ada identitas-identitas atau filosofi yang mencerminkan perusahaan tersebut, nah identitas-identitas tersebut akan digunakan oleh UI/UX Designer untuk membuat sebuah Design System, tujuannya agar UI pada aplikasi yang dibuat menjadi lebih konsisten dan mudah dikenali, mulai dari yang sederhana seperti pemilihan Warna sampai yang lebih kompleks seperti bentuk Button dan TextField.

Berikut ini adalah nama Design System yang terkenal :

• Bootstrap : Twitter

• Carbon : IBM design system

• Fluent : Microsoft

• Material : Google

• Nachos : Trello

• Photon : Firefox

• HIG : Apple

Kamu yang sedang membaca artikel ini mungkin sudah familiar atau setidaknya sudah mengetahui apa itu Material UI kan? yups, selain menyediakan banyak sekali Component yang bisa kita pakai, Material UI juga memberikan kita kebebasan untuk membuat dan menerapkan Design System kita sendiri, itulah kenapa saya suka Library tersebut. 😃 ❤️

App.js

Hal pertama yang harus kita lakukan adalah membuat konfigurasi tema menggunakan function createMuiTheme , function tersebut menerima parameter Object yang berisi konfigurasi tema kita, lalu apa saja yang bisa dikonfigurasi? kamu bisa mengunjungi link di bawah ini :

https://material-ui.com/customization/default-theme

Kemudian kita wrap seluruh Component pada aplikasi kita menggunakan Component <ThemeProvider> dan jangan lupa juga untuk memasukkan variabel theme yang telah kita buat tadi ke dalam prop theme

Default Color Palette Material UI

Pada Material UI, ada 6 jenis palette warna, yaitu :

1. Primary : ini adalah warna yang mungkin akan paling sering muncul pada UI aplikasi kita, seperti warna Button, Navigation Bar, dll

2. Secondary : digunakan untuk memberikan warna alternatif pada UI aplikasi kita (bersifat opsional)

3. Error : digunakan untuk merepresentasikan antarmuka yang membutuhkan perhatian pengguna.

4. Warning : digunakan untuk merepresentasikan antarmuka yang bertujuan untuk memperingatkan pengguna.

5. Info : digunakan untuk merepresentasikan antarmuka yang bertujuan untuk memberikan informasi kepada pengguna.

6. Success : digunakan untuk memberi tahu pengguna bahwa action yang telah dia lakukan berhasil.

nah, untuk mengubah warna, caranya seperti ini :

https://material-ui.com/customization/palette

Perlu diketahui, kita tidak bisa memberikan warna dengan namanya langsung seperti “red” atau “green” tetapi harus diubah terlebih dahulu ke dalam salah satu format berikut :

Format warna yang didukung

Selain bisa mengubah palette warna, Material UI juga mendukung Mode Gelap, caranya seperti ini :

Konfigurasi Dark Mode

Pada property type , kita bisa memberikan value “dark” untuk mode gelap dan “light” untuk mode terang, secara default value-nya adalah “light”.

di bawah ini adalah hex warna default pada Typography, Button, Background, dan Divider pada tampilan Dark & Light Mode, untuk mengubahnya warna-nya, caranya sama seperti di atas.

https://material-ui.com/customization/palette/#dark-mode

Pada bagian ini, saya akan membaginya menjadi 2 bagian yaitu Secara Global dan Berdasarkan Variant:

• Secara Global

Artinya, styles yang kita berikan akan berlaku untuk semua component <Typography> , dan cara penggunaannya seperti ini :

Styling Typography - secara global

• Berdasarkan Variant

Variant yang dimaksud adalah prop variant yang ada pada Component <Typography> , yaitu :

h1 , h2 , h3 , h4 , h5 , h6 , subtitle1 , subtitle2 , body1 , body2 , button , caption, overline

Cara penggunaannya tinggal kita berikan styles ke dalam object typography->[nama variant] seperti ini :

Styling Typography — berdasarkan variant

Spacing adalah helper untuk mengatur jarak antar elemen secara konsisten pada UI kita, dan by default Material UI menggunakan 8px Scaling Factor, artinya apa? angka yang kita berikan akan dikali 8, contoh :

Spacing
Copy
1theme.spacing(2) // hasilnya : 16px

nah, kita bisa mengubah transformasi atau logic dari function spacing tersebut dengan 3 cara, yaitu :

• Mengubah angka scaling factor

Mengubah angka scaling factor

Pada contoh di atas, apabila kita memanggil theme.spacing(2) hasilnya bukan lagi 16px tapi 8px, karena angka 2 yang kita berikan akan dikalikan dengan angka 4

• Menggunakan Function

Menggunakan Function

Pada contoh di atas, apabila kita memanggil theme.spacing(2) hasilnya adalah 3px, karena angka 2 yang kita berikan akan ditambahkan dengan angka 1

• Memasukkan list spacing ke dalam Array

Memasukkan list spacing ke dalam Array

Pada contoh di atas, apabila kita memanggil theme.spacing(2) hasilnya adalah 8px, karena index ke-2 pada array yang kita berikan adalah 8.

Sesuai dengan namanya, shape ini digunakan untuk menentukan bentuk dari elemen kita, misalkan kita ingin bentuknya agak melengkung, caranya seperti ini :

Custom Shape

ini dipakai untuk memberikan efek bayangan pada semua Component bawaan Material UI yang mempunyai prop elevation, contohnya Component Paper dan Card.

nah, shadows ini berisi list 25 value boxShadow , yang akan digunakan sesuai value dari prop elevation yang diberikan, misalkan <Card elevation={2}> maka akan mengambil value dari index ke-2 pada list shadows tersebut.

Jika kita ingin membuat custom shadows , caranya seperti ini :

Custom Shadows

tapi kalau menggunakan cara seperti itu kita harus meng-override 23 value boxShadow lainnya (karena totalnya ada 25), apabila kita ingin custom value boxShadow pada beberapa index saja, caranya seperti ini :

Custom shadows (hanya beberapa index saja)

Sistem Breakpoints bisa kita gunakan untuk membuat layout yang responsif pada berbagai ukuran device.

Di bawah ini adalah jenis dan ukuran Breakpoints bawaan Material UI :

• xs, extra-small: 0px

• sm, small: 600px

• md, medium: 960px

• lg, large: 1280px

• xl, extra-large: 1920px

nah, kita bisa mengganti value-value tersebut atau bahkan menambahkan breakpoint baru dengan cara seperti ini :

Custom Breakpoints

Jujur, pada bagian ini memang agak tricky, karena pada Material UI kan ada banyak sekali Component dan tentunya masing-masing component tersebut mempunyai cara yang berbeda-beda untuk mengkustomisasinya 😅

tapi tenang aja, saya akan menjelaskan konsepnya secara general sehingga bisa kamu terapkan pada Component apa saja yang kamu inginkan,

Secara garis besar, untuk kustomisasi Component bawaan Material UI ada 2 cara, yaitu :

Yang pertama, kita bisa memberikan default props melalui konfigurasi tema, sehingga ketika kita memakai Component tersebut beberapa kali kita tidak perlu memberikan props yang sama berulang-ulang.

Contoh code-nya seperti ini :

Memberikan default props

Kamu tinggal memasukkan nama Component yang ingin diberikan default props dengan tambahan prefix “Mui”.

Kekurangan dari cara pertama adalah kita hanya terpaku pada props yang ada pada Component tersebut.

Jika kita ingin kustomisasi yang lebih kompleks dan tidak mungkin dilakukan hanya dengan memberikan props yang ada pada Component tersebut, kita bisa meng-override styles yang ada pada suatu Component.

Dalam mode development, format penamaan class pada Material UI itu seperti ini :

Classname Format
Copy
1Mui[component name]-[style rule name]

• Component Name : Nama Component bawaan Material UI yang kita import atau pakai.

• Style Rule Name : Nama aturan style pada suatu Component yang bisa kita override style-nya (Satu Component bisa mempunyai banyak Style Rule).

Untuk mengetahui nama Style Rule nya, ada 2 cara, Pertama, kita bisa Inspect element dari Component yang ingin kita kustomisasi menggunakan DevTools :

Inspect Element pada Google Chrome

dan yang kedua, kita bisa mengetahuinya dari dokumentasi Material UI, ada di bagian Component API -> [Nama Component] -> CSS

nah kalau dari dokumentasi, ada deskripsinya juga jadi kita ngga bingung 😁

dan untuk meng-override styles pada Component tersebut, ada 4 cara :

1. Dari object konfigurasi theme

Overriding Styles — Dari object theme

Jika kita menggunakan cara ini, styles yang kita berikan akan bersifat global, artinya jika kita meng-import Component Button dari Material UI, secara otomatis Button tersebut akan mempunyai property letterSpacing 10px.

2. Menggunakan prop classes

Overriding Styles — Menggunakan prop classes

Jika kita menggunakan cara ini, kita tidak bisa langsung memberikan styles pada prop classes yang ada di Component <Button>, tetapi kita harus membuat object classes terlebih dahulu menggunakan method makeStyles yang disediakan Material UI,

kemudian kita passing styles kita ke dalam prop classes sesuai nama Style Rule nya, pada contoh di atas, nama Style Rule nya adalah label

3. Menggunakan HOC withStyles

Overriding Styles — Menggunakan HOC withStyles

ini bisa dibilang versi lebih sederhananya dari cara nomor 2, kita tidak perlu membuat class baru, dll. cukup dengan memberikan styles pada Style Rule yang kita inginkan. 😃

Cara kerja di belakangnya pun juga hampir sama, yaitu memberikan className melalui prop classes.

HOC (Higher Order Function) withStyles akan mengembalikan Component baru yang kita tampung ke dalam variabel CustomButton . jadi, untuk menggunakannya caranya seperti ini :

Penggunaan component CustomButton
Copy
1<CustomButton>Submit</CustomButton>

4. Menggunakan inline styles

Overriding Styles — Menggunakan inline styles

Inline styles cocok digunakan untuk styling Component yang sederhana dan tidak terlalu banyak, seperti mengubah warna atau mengubah ukuran font.

karena kalau terlalu banyak bisa mengakibatkan code kita jadi kurang readable dan maintainable.

Jika kita membutuhkan className untuk styling element, yang bisa dipakai berkali-kali, kita bisa aja membuat hooks useStyles seperti pada contoh nomor 2 di atas, namun kekurangannya dia ngga bersifat global,

nah, untuk membuat Global ClassName yang bisa kita pakai di mana saja, kita bisa menggunakan HOC makeStyles dan meletakkan class-class kita ke dalam property "@global"

contoh code-nya seperti ini :

Global ClassName

Mungkin kamu bertanya-tanya :

Yap, bisa aja seperti itu, tapi kalau seperti itu kita ngga bisa mengakses object theme untuk membantu kita membuat consistent UI.

Oke mungkin itu saja yang bisa saya bagikan kali ini, kalau kamu merasa artikel ini bermanfaat silakan Like & Share artikel ini ke teman-teman kamu atau jika kamu punya pertanyaan, tulis aja di kolom komentar, Thank you! 😁 🙏