我在react中学习tailwind,想用tailwind把动态值放到css中。我习惯了MUI,它很简单,
<Box sx={{ width: dynamicValue }} />
字符串我怎么能顺风做这种事呢?如果我不能在顺风的情况下做到这一点,为什么在MUI这不是问题?
s8vozzvw1#
要在React中使用Tailwind类,您可以在className prop中声明它们,并用空格分隔,React中的className相当于HTML中的class。例如:<Box className='flex'>Content</Box>sx是特定于MUI元素的prop。澄清你的意思是使用顺风将动态值放入css
className
<Box className='flex'>Content</Box>
sx
t3irkdon2#
我的回答:Tailwind CSS提供数值和分数值。比如
w-0 width: 0px; w-px width: 1px; w-0.5 width: 0.125rem; /* 2px */ w-1 width: 0.25rem; /* 4px */ w-1.5 width: 0.375rem; /* 6px */ ... w-auto width: auto; w-1/2 width: 50%; w-1/3 width: 33.333333%; w-2/3 width: 66.666667%;
字符串此外,您还可以使用自定义宽度大小,如下所示。
w-[619px] or w-[50%]
型请参考此链接。https://tailwindcss.com/docs/width
pgpifvop3#
您可以使用
<div style={{ width: `${widthValue}px` }}></div>
字符串
ogsagwnx4#
如果你想让你的Material组件具有tailwind风格,你必须首先改变风格的注入顺序。一旦完成,你可以简单地添加classname prop 并开始输入你想要的风格。对于这种情况:
classname
字符串您可以:
<Box classname={`${dynamicValue}`} />
型请记住,${}用于在样式中添加变量,而``用于允许变量在样式中
${}
4条答案
按热度按时间s8vozzvw1#
要在React中使用Tailwind类,您可以在
className
prop中声明它们,并用空格分隔,React中的className相当于HTML中的class。例如:
<Box className='flex'>Content</Box>
sx
是特定于MUI元素的prop。澄清你的意思是
使用顺风将动态值放入css
t3irkdon2#
我的回答:
Tailwind CSS提供数值和分数值。
比如
字符串
此外,您还可以使用自定义宽度大小,如下所示。
型
请参考此链接。https://tailwindcss.com/docs/width
pgpifvop3#
您可以使用
字符串
ogsagwnx4#
如果你想让你的Material组件具有tailwind风格,你必须首先改变风格的注入顺序。一旦完成,你可以简单地添加
classname
prop 并开始输入你想要的风格。对于这种情况:
字符串
您可以:
型
请记住,
${}
用于在样式中添加变量,而``用于允许变量在样式中