Cara Menyesuaikan Tema React Menggunakan Ant Design

Agak meremehkan untuk mengatakan bahwa desain Antarmuka Pengguna (UI) yang baik memainkan peran besar dalam melibatkan audiens situs web Anda dan mengarahkan mereka ke konversi. Meskipun UI yang bagus membutuhkan desain yang interaktif, intuitif, kaya, dan dapat diakses - tantangan yang tampaknya menakutkan - hal itu dapat dicapai jika Anda menggunakan komponen dan pustaka berkualitas tinggi untuk membuatnya.

Yang paling populer adalah desain Ant. Ini adalah library React UI yang memiliki akses ke komponen berkualitas yang mudah digunakan untuk membangun antarmuka pengguna yang elegan dan cepat.

Mengapa Desain Semut?

Dibuat oleh Alibaba, sistem desain Ant digunakan oleh beberapa nama besar seperti Alibaba (tentu saja), Tencent, Baidu, dan banyak lagi.

Ini dengan cepat menjadi perpustakaan React UI yang paling banyak digunakan. Sebelumnya Material-UI adalah yang paling populer dengan lebih dari 75k bintang di Github, tetapi Ant Design kini telah melampaui mereka dengan 77,5k!

Apa yang telah dilakukan dengan sangat baik oleh desain Ant adalah memanusiakan desain mereka. Mereka mengevaluasi kualitas desain dengan mengukur empat nilai yang berpusat pada kesadaran manusia dan kebahagiaan - kealamian, kepastian, kebermaknaan, dan pertumbuhan. Mereka bertindak sebagai standar untuk desainer dan membimbing mereka dalam pengambilan keputusan dan penilaian yang lebih baik.

Komponen Desain Semut

Ant design (atau antd) menawarkan banyak komponen UI kaya yang dapat meningkatkan pengalaman situs web atau aplikasi Anda. Lihat beberapa di antaranya di bawah ini, tetapi untuk opsi lainnya, kunjungi di sini.

Komponen Universal: Tombol, ikon, tipografi, dll.

Tata letak: Kisi, tata letak, spasi, dll.

Navigasi: Breadcrumbs, menu, menu dropdown, dll.

Entri Data: Pelengkapan otomatis, kotak centang, pemilih tanggal, dll.

Tampilan Data: Avatar, komentar, panel yang dapat dilipat, dll.

Memasang React dan Desain Ant

Sekarang setelah kita mengetahui komponen apa saja yang tersedia dalam desain Ant, mari pelajari proses instalasi dasar React dan kemudian menginstal desain Ant di dalamnya.

Anda dapat menggunakan yarn atau npm untuk mengatur proyek React. Di bawah ini adalah perintah dasar untuk menginstal dan mengatur React:

 $ yarn create react-app antd-demo # or $ npx create-react-app antd-demo $ cd antd-demo $ yarn start

Setelah React diinstal, Anda dapat melihat aplikasi yang sedang berjalan di browser.

Ini adalah direktori default yang dihasilkan dalam proyek yang baru dibuat. Ke depan, kami akan memodifikasi beberapa file di sini untuk mencapai hasil akhir.

 ├── README.md ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ └── logo.svg └── yarn.lock

Sekarang setelah mengatur React, mari kita instal desain Ant di dalamnya dengan perintah ini:

 $ yarn add antd

Setelah menginstal antd, Anda dapat menggunakan komponen Ant dengan memodifikasi markup di App.js yang ada di dalam folder src di proyek Anda. Di sini, saya menambahkan elemen tombol dari Ant.

 import React from 'react'; import { Button } from 'antd'; import './App.css'; const App = () => ( <div className="App"> <Button type="primary">Button</Button> </div> ); export default App;

Komponen tombol semut:

Setelah Anda menyimpan dan menjalankan aplikasi, Anda akan dapat melihat elemen tombol utama Semut di browser dengan warna biru (seperti yang ditunjukkan di atas). Ini berarti Ant berhasil diintegrasikan ke dalam React.

Menyesuaikan Tema

Bagian terbaik tentang mengintegrasikan Ant Design dengan React adalah memungkinkan Anda untuk menyesuaikan token desain Anda untuk memenuhi keragaman UI dari persyaratan bisnis atau merek, termasuk warna primer, radius batas, warna batas, dll.

Kredit gambar: Intoli

Untuk mengizinkan penyesuaian ini, Anda perlu melakukan beberapa konfigurasi lanjutan.

Konfigurasi Lanjutan:

Pada titik ini Anda perlu menyesuaikan konfigurasi default create-react-app. Mari gunakan CRACO (Create React App Configuration Override) - solusi komunitas untuk konfigurasi khusus create-react-app.

Langkah 1: Pertama-tama Anda harus menginstal CRACO dan mengganti skrip React default dengan CRACO di package.json.

 $ yarn add @craco/craco /* package.json */ "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", + "start": "craco start", + "build": "craco build", + "test": "craco test", }

Menurut persyaratan untuk mengonfigurasi tema, tema khusus perlu menggunakan fungsi penggantian variabel Less yang serupa dengan yang disediakan oleh less-loader. Kami dapat memperkenalkan Craco-less untuk membantu memuat lebih sedikit gaya dan memodifikasi variabel.

 $ yarn add craco-less

Langkah 2: Ubah file src/App.css menjadi src/App.less , dan impor file antd.less melalui antd.css di app.less

 /* src/App.js */ - import './App.css'; + import './App.less'; /* src/App.less */ - @import '~antd/dist/antd.css'; + @import '~antd/dist/antd.less';

Langkah 3: Buat craco.config.js di direktori root untuk mengubah konfigurasi default.

 const CracoLessPlugin = require('craco-less'); module.exports = { plugins: [ { plugin: CracoLessPlugin, options: { lessLoaderOptions: { lessOptions: { modifyVars: { '@primary-color': '#1DA57A' }, javascriptEnabled: true, }, }, }, }, ], };

Di sini, less-loader adalah modifikasiVars yang digunakan untuk konfigurasi tema.

Jika Anda melihat tombol hijau, Anda tahu konfigurasi berhasil. Sekarang Anda dapat menyesuaikan tema dengan set warna Anda sendiri menggunakan token/variabel yang disediakan.

Variabel Gaya Desain Semut

Di bawah ini adalah beberapa variabel generik yang paling umum digunakan. Anda dapat mengunjungi di sini untuk mendapatkan detail tentang semua variabel gaya yang tersedia.

 @primary-color: #1890ff; // primary color for all components @link-color: #1890ff; // link color @success-color: #52c41a; // success state color @warning-color: #faad14; // warning state color @error-color: #f5222d; // error state color @font-size-base: 14px; // major text font size @heading-color: rgba(0, 0, 0, 0.85); // heading text color @text-color: rgba(0, 0, 0, 0.65); // major text color @text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color @disabled-color: rgba(0, 0, 0, 0.25); // disable state color @border-radius-base: 2px; // major border radius @border-color-base: #d9d9d9; // major border color @box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); // major shadow for layers