1
00:00:02,390 --> 00:00:05,880
Tidak ada komponen style yang bagus tapi bagaimana cara kerjanya.

2
00:00:05,990 --> 00:00:09,590
Trik sulap apa yang mereka lakukan.

3
00:00:09,590 --> 00:00:14,090
Nah untuk itu mari kita periksa ini di alat pengembang.

4
00:00:14,100 --> 00:00:20,680
Apa yang kita lihat di sana jika kita mengharapkan kematian yang diberikan ini adalah bahwa mereka memiliki kelas CSF yang menyertainya.

5
00:00:20,870 --> 00:00:28,490
Kelas dengan nama yang sangat aneh yang kita tidak mendefinisikan nama kelas ini secara otomatis ditambahkan oleh pustaka

6
00:00:28,580 --> 00:00:34,310
komponen gaya karena perlu diingat bahwa kematian ini di sini sebenarnya adalah output

7
00:00:34,310 --> 00:00:36,170
dari metode kematian ini.

8
00:00:36,230 --> 00:00:36,670
Baik.

9
00:00:36,710 --> 00:00:38,080
Kami tidak membuat kematian.

10
00:00:38,090 --> 00:00:43,220
Kami memberikan gaya yang mereka miliki di sini yang merupakan hasil dari memanggil metode dev di

11
00:00:43,400 --> 00:00:46,170
sini dan akhirnya dengan notasi template kebijaksanaan ini.

12
00:00:46,250 --> 00:00:54,020
Jadi metode diff ini mengembalikan komponen reaksi yang akhirnya membuat kematian reguler div reguler dengan

13
00:00:54,110 --> 00:00:55,720
C seperti kelas.

14
00:00:56,090 --> 00:00:58,910
Dan dari mana asal kelas ini.

15
00:00:58,910 --> 00:01:07,670
Yah kita bisa melihat bahwa di kepala dokumen ini kita akan melihat tag gaya atau pajak beberapa

16
00:01:07,670 --> 00:01:08,750
gaya sebenarnya.

17
00:01:08,750 --> 00:01:15,230
Dan jika kita melihat teks gaya ini gaya ini membawa di sini khusus dengan atribut ini di sini kita melihat

18
00:01:15,830 --> 00:01:18,540
ada nama kelas yang aneh ini lagi.

19
00:01:18,540 --> 00:01:22,700
Sehari kemudian kami menemukan gaya yang kami siapkan di sini.

20
00:01:22,730 --> 00:01:29,930
Jadi gaya yang kami atur di sini tidak ditambahkan sebagai gaya inline melainkan paket komponen gaya

21
00:01:30,170 --> 00:01:37,430
yang membawanya menempatkan kami untuk melihat kami sebagai penyeleksi kelas dan menambahkannya ke kepala dokumen dan kemudian

22
00:01:37,430 --> 00:01:45,110
hanya menambahkan CSO yang sesuai sebagai kelas ke div yang dikembalikan oleh komponen ini atau yang dibuat sebagai

23
00:01:45,170 --> 00:01:47,020
bagian dari komponen ini.

24
00:01:47,030 --> 00:01:52,670
Ini adalah bagaimana komponen gaya bekerja di bawah tenda yang sangat bagus karena itu berarti Anda

25
00:01:52,670 --> 00:01:56,660
tidak bekerja dengan gaya sebaris yang dapat memiliki kerugian tertentu.

26
00:01:56,660 --> 00:02:01,940
Misalnya Anda tidak benar-benar memanfaatkan sifat cascading C. S. dengan mereka.

27
00:02:02,000 --> 00:02:02,330
Tidak.

28
00:02:02,330 --> 00:02:08,750
Alih-alih, Anda memiliki C reguler karena kelasnya dikelola secara otomatis untuk Anda oleh komponen gaya yang menjadikan

29
00:02:08,750 --> 00:02:11,140
ini solusi yang sangat hebat.

30
00:02:11,300 --> 00:02:15,860
Mari juga diterapkan ke penawaran aplikasi GST di aplikasi J. S ..

31
00:02:16,070 --> 00:02:21,960
Kami juga memiliki beberapa gaya di sini yang sebelumnya kami tambahkan dengan radium seperti yang kami lakukan secara langsung.

32
00:02:21,960 --> 00:02:28,100
J. S. Ngomong-ngomong kita juga bisa menghilangkan style konstan di sini kita tidak membutuhkannya lagi.

33
00:02:28,250 --> 00:02:31,240
Kami telah menata komponen tetapi aplikasi memiliki itu sama.

34
00:02:31,240 --> 00:02:33,220
Kami mendapat konstitusi gaya ini.

35
00:02:33,230 --> 00:02:37,280
Kami tidak membutuhkannya lagi seperti ini karena kami tidak menggunakan radium lagi.

36
00:02:37,280 --> 00:02:41,890
Sekarang gaya konstan ini penting untuk tombol kita.

37
00:02:41,930 --> 00:02:45,190
Jadi pada akhirnya yang ingin kita buat adalah tombol yang macet di sebelah kanan.

38
00:02:45,410 --> 00:02:50,950
Sekarang lagi kita dapat melakukan ini dengan paket komponen yang terhenti dan catatan samping tentu saja

39
00:02:50,960 --> 00:02:56,510
Anda dapat semua cerita komponen gaya Anda dalam file terpisah dan kemudian menggunakannya kembali di beberapa

40
00:02:56,510 --> 00:03:02,840
file jika Anda perlu mendengar saya kebetulan hanya membutuhkan Dave dan orang ini saja komponen dan tombol itu di

41
00:03:02,960 --> 00:03:06,530
komponen aplikasi tetapi Anda benar-benar dapat membaginya di seluruh file.

42
00:03:06,530 --> 00:03:12,230
Jadi di sini saya mengimpor gaya dari komponen gaya lagi dan dengan itu saya ingin membuat gaya saya.

43
00:03:12,230 --> 00:03:17,120
Tombol jadi di sini saya akan memiliki tombol gaya saya.

44
00:03:17,120 --> 00:03:20,540
Tentu saja Anda dapat memberi nama konstanta ini sesuka Anda dan di sana.

45
00:03:20,600 --> 00:03:27,940
Saya membuat dengan tombol gaya seperti ini lagi menggunakan sintaks template kebijaksanaan ini di sini.

46
00:03:27,950 --> 00:03:39,250
Sekarang di sini kita memiliki gaya kita yang dapat kita salin dalam gaya itu konstan dan ditambahkan di sini dalam literal template kita.

47
00:03:39,600 --> 00:03:45,660
Sekarang kita tidak perlu tanda kutip di sini karena kita sedang menulis C. S. ada di sini.

48
00:03:45,660 --> 00:03:46,380
Itu penting.

49
00:03:46,380 --> 00:03:48,380
Anda menulis C. reguler S. ada di sini.

50
00:03:48,480 --> 00:03:52,970
Jadi, Anda juga harus menggunakan CSA biasa sebagai properti.

51
00:03:53,100 --> 00:03:58,920
Anda tidak menggunakan kasing unta lagi di sini karena apa yang Anda tulis di surat wasiat Anda akan berakhir di kepala

52
00:03:58,920 --> 00:04:02,210
dokumen Anda di antara pajak gaya seperti yang Anda lihat sebelumnya.

53
00:04:02,220 --> 00:04:10,440
Jadi kita menulis C biasa seperti di sini kita tidak perlu mematuhi sintaks javascript khusus di

54
00:04:10,440 --> 00:04:18,540
sini karena hanya C. S. jadi mari kita tambahkan tanda koma di akhir setiap baris hapus

55
00:04:18,540 --> 00:04:20,640
semua tanda kutip dan singkirkan semua notasi unta.

56
00:04:20,640 --> 00:04:27,000
Sekarang hal keren tentang komponen style adalah Anda bisa menambahkan hover selektor semu seperti ini dengan

57
00:04:27,000 --> 00:04:28,000
sedikit penyesuaian.

58
00:04:28,050 --> 00:04:33,390
Anda perlu menambahkan simbol Ampersand di depannya dan ini akan memberi tahu paket komponen

59
00:04:33,390 --> 00:04:39,390
gaya bahwa ini milik tombol ini yang tersebar dan bahwa di sana itu harus menerapkannya melayang-layang gaya.

60
00:04:39,630 --> 00:04:47,850
Atau waspadai gaya hover ini bahwa di sini kita memiliki warna latar belakang hijau muda seperti itu dan

61
00:04:47,850 --> 00:04:50,130
warna hitam seperti ini.

62
00:04:50,130 --> 00:04:55,840
Jadi ini adalah bagaimana kami menerjemahkan ini ke CSA biasa sebagaimana diterapkan pada tombol ini yang dibuat oleh ini.

63
00:04:55,850 --> 00:05:00,690
Metode tombol pada akhirnya dan sekarang kita dapat menggunakan tombol berhenti itu.

64
00:05:00,690 --> 00:05:07,990
Jadi mari kita pergi ke sini dan mari kita ganti tombol kita di sini dengan tombol gaya.

65
00:05:08,040 --> 00:05:10,930
Sekarang yang penting kami tidak berlaku untuk gaya inline seperti ini lagi.

66
00:05:11,010 --> 00:05:16,740
Kami masih dapat menambahkan klik karena komponen tombol ini yang dibuat oleh paket komponen

67
00:05:16,740 --> 00:05:20,350
gaya memiliki semua alat peraga normal setiap tombol.

68
00:05:20,430 --> 00:05:24,310
Jadi pada ujung klik masih tersedia di sana.

69
00:05:24,420 --> 00:05:31,380
Jika sekarang kita simpan itu dan kita memuat kembali kita masih melihat tombol di sini dan Anda melihat fakta melayang ketika

70
00:05:31,380 --> 00:05:36,540
saya akan mengarahkannya dan hanya untuk membuktikan lagi bahwa ini berasal dari komponen style.

71
00:05:36,630 --> 00:05:44,360
Jika saya untuk sementara menghapus kode hover di sini, Anda lihat sekarang saya tidak memiliki efek hover di sini.

72
00:05:44,400 --> 00:05:47,990
Jadi itu benar-benar komponen gaya yang melakukan pekerjaan mereka.

73
00:05:48,030 --> 00:05:49,110
Mari kita reaktif.