Implementieren Sie dynamische Medienabfrageeinstellungen mit Tailwind CSS

Question

In meiner React JS-Anwendung habe ich eine Komponente und möchte einen mobilen Haltepunkt basierend auf einer Variablen festlegen:

<Component size={'500px'}/>

const Component = ({size}) =>
 zurückkehren (
   <div md:flex>hello</div>
)
}

Ich möchte etwas wie [size]:flex hinzufügen, wobei md:flex einen Haltepunkt setzt. (Beispiel: Wenn die Größe 500 Pixel, 100 Pixel oder 900 Pixel beträgt, stellen Sie sie auf „Flex“ ein.)

Frage: Ist es möglich, Medienabfragen so einzustellen, wie ich es oben beschrieben habe?

Answer 1

您可以使用classnames npm包：

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