Bagaimanakah Anda Boleh Menggunakan CSS Tailwind dengan Nama Kelas Dinamik dalam React?

Menggunakan Tailwind CSS dengan Nama Kelas Dinamik

Apabila bekerja dengan React dan Tailwind CSS, ia boleh menggoda untuk menghantar nilai dinamik, seperti pembolehubah konteks, sebagai nama kelas . Walau bagaimanapun, Tailwind mempunyai keperluan khusus untuk nama kelas menjadi rentetan tidak putus yang lengkap. Akibatnya, hanya menghantar pembolehubah yang diinterpolasi ke dalam className tidak akan berfungsi seperti yang diharapkan.

Dokumentasi Tailwind secara eksplisit menyatakan, "Jika anda menggunakan interpolasi rentetan atau menggabungkan nama kelas separa bersama-sama, Tailwind tidak akan menemuinya dan oleh itu akan tidak menjana CSS yang sepadan."

Penyelesaian: Gunakan Kelas Lengkap Nama

Untuk menggunakan Tailwind secara berkesan dengan nilai dinamik, adalah penting untuk menentukan nama kelas anda dengan set nilai penuh. Sebagai contoh, bukannya menggunakan:

<p className={`bg-[${colors.secondary}] text-text-white`}></p>

Tentukan kelas terus dalam ThemeContext anda:

const colors = {
  // …
  secondary: darkTheme ? "bg-[#FFFFFF]" : "bg-[#FFFFFF]",
  // …
};

Kemudian gunakannya dalam komponen anda seperti ini:

<p className={`${colors.secondary} text-text-white`}></p>

Alternatif: Gunakan Penggayaan sebaris

Jika mentakrifkan nama kelas yang lengkap tidak boleh dilaksanakan, anda juga boleh menggunakan atribut gaya untuk menggunakan gaya dinamik:

<p className="text-text-white">

Pendekatan ini membolehkan lebih fleksibiliti apabila bekerja dengan nilai dinamik tetapi memerlukan penggunaan penggayaan sebaris.

Atas ialah kandungan terperinci Bagaimanakah Anda Boleh Menggunakan CSS Tailwind dengan Nama Kelas Dinamik dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!