使用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", } )