具有动态值的顺风

问题描述 投票:0回答:3

我正在学习 react 中的 tailwind,并希望使用 tailwind 将动态值放入 css 中。
我习惯了 MUI,它很简单,就像

<Box sx={{ width: dynamicValue }} />

我如何在顺风中做这样的事情?
如果我不能用 tailwind 做到这一点,为什么在 MUI 中它不是问题?

reactjs material-ui tailwind-css
3个回答
0
投票

要在 React 中使用 Tailwind 类,您可以在由空格分隔的

className
属性中声明它们,React 中的 className 等同于 HTML 中的类。
例如:
<Box className='flex'>Content</Box>

sx
是 MUI 元素特有的道具。

澄清你的意思

使用 tailwind 将动态值放入 css


0
投票

我的答案:

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


0
投票

你可以使用

<div style={{ width: `${widthValue}px` }}></div>
© www.soinside.com 2019 - 2024. All rights reserved.