Rumah >hujung hadapan web >tutorial js >Bagaimana Menggunakan Pembolehubah Konteks dengan Nama Kelas CSS Tailwind?

Bagaimana Menggunakan Pembolehubah Konteks dengan Nama Kelas CSS Tailwind?

Barbara Streisand
Barbara Streisandasal
2024-11-14 16:27:02951semak imbas

How to Use Context Variables with Tailwind CSS Class Names?

Nama Kelas Dinamik dengan CSS Tailwind

Apabila menggunakan pembolehubah konteks dalam React, adalah perkara biasa untuk menghantar nilai ini sebagai nama kelas kepada Tailwind CSS. Walau bagaimanapun, pendekatan ini mungkin menghadapi pengehadan.

Konvensyen Penamaan CSS Tailwind

Menurut dokumentasi CSS Tailwind, ia hanya mentafsir rentetan tidak terputus lengkap sebagai nama kelas yang sah. Nama kelas dinamik yang dibina melalui interpolasi atau gabungan tidak akan dikenali.

Penyelesaian:

  • Gunakan Nama Kelas Lengkap: Tentukan kelas penuh nama dalam Konteks Tema anda, memastikan ia wujud sebagai rentetan tunggal.
  • Contoh:

    const colors = {
    // ...
    secondary: darkTheme ? "bg-[#FFFFFF]" : "bg-[#FFFFFF]",
    // ...
    };
  • Gunakan Sebaris Atribut Gaya:

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

    Dengan mematuhi penyelesaian ini, anda boleh menggabungkan pembolehubah konteks dengan berkesan ke dalam nama kelas CSS Tailwind anda.

Atas ialah kandungan terperinci Bagaimana Menggunakan Pembolehubah Konteks dengan Nama Kelas CSS Tailwind?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn