Rumah  >  Soal Jawab  >  teks badan

Bina nama kelas secara dinamik dalam TailwindCss

<p>Saya sedang membina perpustakaan komponen menggunakan TailwindCss untuk projek saya yang seterusnya, dan saya baru sahaja menghadapi masalah kecil dengan komponen Button. </p> <p>Saya lulus prop seperti <code>'primary'</code> atau <code>'secondary'</code> yang berfungsi sama seperti yang saya lakukan dalam <code>tailwind.config. js< ;/code> dan kemudian saya mahu menetapkannya kepada komponen butang menggunakan <code>Template Lites</code> ; <pre class="brush:php;toolbar:false;"><butang Nama kelas={` w-40 bulat-lg p-3 m-2 fon-peralihan tebal-semua tempoh-100 jidar-2 aktif:skala-[0.98] bg-${color}-500 `} onClick={onClick} type="butang" tabIndex={0} > {anak-anak} </button></pre> <p>Nama kelas dipaparkan dengan baik dalam penyemak imbas, ia menunjukkan <kod>bg-primary-500</code> dalam DOM, tetapi tidak dalam tab Gaya Gunaan. </p> <p>Konfigurasi tema adalah seperti berikut:</p> <pre class="brush:php;toolbar:false;">tema: { lanjutkan: { warna: { utama: { 500: '#B76B3F', }, menengah: { 500: '#344055', }, }, }, },</pre> <p>Tetapi ia tidak menggunakan sebarang gaya. Jika saya hanya menambah <code>bg-primary-500</code> ia berfungsi dengan baik. </p> <p>Sejujurnya, saya hanya tertanya-tanya sama ada ini kerana pengkompil JIT tidak mengambil nama kelas dinamik atau jika saya melakukan sesuatu yang salah (atau jika ini bukan cara untuk menggunakan tailWind). </p> <p>Sebarang bantuan dialu-alukan, terima kasih terlebih dahulu! </p>
P粉147747637P粉147747637444 hari yang lalu539

membalas semua(2)saya akan balas

  • P粉034571623

    P粉0345716232023-08-25 09:28:28

    Tidak disyorkan untuk menulis kelas CSS Tailwind dengan cara ini. Walaupun mod JIT tidak disokong , untuk memetik dokumentasi Tailwind CSS: "Tailwind tidak termasuk apa-apa jenis masa jalan klien, jadi nama kelas perlu diekstrak secara statik pada masa binaan dan tidak boleh dipercayai dalam klien "

    balas
    0
  • P粉530519234

    P粉5305192342023-08-25 00:45:37

    Jadi selepas mengetahui bahawa cara kerja ini tidak digunakan dan JIT tidak menyokongnya (terima kasih kepada pengulas yang murah hati). Saya telah menukar pendekatan kepada pendekatan yang lebih berasaskan "konfigurasi".

    Pada asasnya, saya mentakrifkan const dengan konfigurasi asas prop yang berbeza dan menerapkannya pada komponen. Ini memerlukan lebih banyak penyelenggaraan, tetapi ia menyelesaikan kerja.

    Ini ialah contoh konfigurasi. (tiada menaip diperlukan buat masa ini) dan beberapa pemfaktoran semula yang lebih baik, tetapi anda akan mendapat idea itu.

    const buttonConfig = {
      // Colors
      primary: {
        bgColor: 'bg-primary-500',
        color: 'text-white',
        outline:
          'border-primary-500 text-primary-500 bg-opacity-0 hover:bg-opacity-10',
      },
      secondary: {
        bgColor: 'bg-secondary-500',
        color: 'text-white',
        outline:
          'border-secondary-500 text-secondary-500 bg-opacity-0 hover:bg-opacity-10',
      },
    
      // Sizes
      small: 'px-3 py-2',
      medium: 'px-4 py-2',
      large: 'px-5 py-2',
    };
    

    Kemudian saya menerapkan gaya seperti ini:

    <motion.button
        whileTap={{ scale: 0.98 }}
        className={`
        rounded-lg font-bold transition-all duration-100 border-2 focus:outline-none
        ${buttonConfig[size]}
        ${outlined && buttonConfig[color].outline}
        ${buttonConfig[color].bgColor} ${buttonConfig[color].color}`}
        onClick={onClick}
        type="button"
        tabIndex={0}
      >
        {children}
      </motion.button>

    balas
    0
  • Batalbalas