使用Tailwind CSS實現動態媒體查詢設置
P粉141911244
2023-08-26 20:54:45
<p>在我的React JS應用程式中，我有一個元件，我想根據一個變數設定移動斷點：</p>
<pre class="brush:php;toolbar:false;"><Component size={'500px'}/>
const Component = ({size}) => {
return (
<div md:flex>hello</div>
)
}</pre>
<p>我想要在<code>md:flex</code>的位置上添加類似<code>[size]:flex</code>的東西，以便根據該屬性設定斷點。 （例如：如果大小為500px或100px或900px，則設定為display flex）</p><p>問題：是否可以根據我上面描述的方式設定媒體查詢？ </p>
您可以使用classnames npm套件：
const rootClassName = cn( // 首先添加任何tailwind classNames "h-full flex flex-col", // 这是条件部分。根据size属性，定义className { [md:flex-1]: size === "A", [sm:flex-1]: size === "B", } )