reactjs 顺风宽度：自动添加到div的style属性

mfuanj7w 于 2023-04-05 发布在 React

关注(0)|答案(1)|浏览(121)

我正在使用Next.JS和Tailwind制作一个Web应用程序来进行样式设计。我想通过阅读每个accord的size属性（这是一个字符串）来Map一些香水的“accord”，并赋予它们每个可变的宽度。我将其插入每个div的Tailwind类，如下所示：

className={`text-center w-${accord.size} rounded-r-2xl`}

我还有一个不涉及宽度的style属性：

style={{ backgroundColor: accordsData[accord.accord].color }}

当这段代码在浏览器中呈现时，它会为每个div返回正确的类，但是不会呈现宽度，因为它会自动将width: 0px;添加到样式中：

<div class="text-center w-100 rounded-r-2xl" style="background-color: rgb(204, 51, 0); width: 0px;">...</div>

我希望我的应用程序不添加这种额外的样式，而是使用Tailwind类的宽度。
任何帮助都将不胜感激

1条答案

你是否在tailwind的默认宽度设置中添加了宽度值？或者你是否在 * tailwind.config.js * 文件中设置了自定义宽度？
如果你不这样做，你试图设置一个任意的值，你可以看看Tailwind的文档。
根据Tailwind的文档：

任意值**如果您需要使用一次性宽度值，而该值在主题中没有意义，请使用方括号使用任意值动态生成属性。

<div class="w-[32rem]">
  <!-- ... -->
</div>

你可以像这样在[]中包含宽度：

<div class={`w-[${accord.size}]`}>
  <!-- ... -->
</div>

希望这有帮助！