我正在学习 react 中的 tailwind,并希望使用 tailwind 将动态值放入 css 中。
我习惯了 MUI,它很简单,就像
<Box sx={{ width: dynamicValue }} />
我如何在顺风中做这样的事情?
如果我不能用 tailwind 做到这一点,为什么在 MUI 中它不是问题?
要在 React 中使用 Tailwind 类,您可以在由空格分隔的
className
属性中声明它们,React 中的 className 等同于 HTML 中的类。<Box className='flex'>Content</Box>
sx
是 MUI 元素特有的道具。
澄清你的意思
使用 tailwind 将动态值放入 css
我的答案:
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%]
你可以使用
<div style={{ width: `${widthValue}px` }}></div>