Laksanakan tetapan pertanyaan media dinamik menggunakan CSS Tailwind

Question

Dalam aplikasi React JS saya, saya mempunyai komponen dan saya mahu menetapkan titik putus mudah alih berdasarkan pembolehubah:

<Saiz komponen={'500px'}/>

const Komponen = ({saiz}) =>
 kembali (
   <div md:flex>hello</div>
)
}

Saya ingin menambah sesuatu seperti [saiz]:flex di mana md:flex akan menetapkan titik putus berdasarkan sifat itu. (cth: jika saiznya ialah 500px atau 100px atau 900px, tetapkannya kepada paparan fleksibel)

Soalan: Adakah mungkin untuk menetapkan pertanyaan media seperti yang saya nyatakan di atas?

Answer 1

Anda boleh menggunakan nama kelas pakej npm:

const rootClassName = cn(
     // 首先添加任何tailwind classNames
     "h-full flex flex-col",
     // 这是条件部分。根据size属性，定义className
    {
      [md:flex-1]: size === "A",
      [sm:flex-1]: size === "B",
    }
  )