将字符串添加到 CSS 类中的变量答案

【问题标题】：Adding a string to a variable in CSS class将字符串添加到 CSS 类中的变量
【发布时间】：2022-11-27 08:43:46
【问题描述】：

我正在尝试将一个变量添加到一个类名中，并且需要附加一个百分比才能使其正常工作。例如以下作品：

className="scale-x-[35%]"

但以下不会：

className={`scale-x-[${variableNumber}%]`}

将百分比字符串附加到我的变量的正确方法是什么？

编辑：完整代码


export default function proposalDetail() {
  const [percentage1, setPercentage1] = useState(10);
  const [percentage2, setPercentage2] = useState(35);
  return (
            <div className="relative p-4 my-4 overflow-hidden border border-gray-200 rounded-lg hover:border-indigo-500">
              <div
                className={`scale-x-${percentage1}% absolute inset-0 w-full origin-top-left bg-indigo-500 bg-opacity-50`}
              ></div>
              <div className="relative text-black z-100 dark:text-white">
                <div className="font-medium">0% burn, 2.5% revenue</div>
                <div className="text-sm">23 voters</div>
                <div className="text-sm">295.7513474746361 QNTFI ({percentage1}%)</div>
              </div>
            </div>
)

【问题讨论】：

我在这里没有看到问题。您可以发布整个代码 sn-p 吗？也许 variableNumber 是 undefined。另外，你在使用 Tailwind css 吗？如果是这样，您不需要方括号，只需scale-x-${variableNumber}%
当您说“它不起作用”时，您的意思是在初始渲染时还是在您的 var 更新时？
@jmargolisvt 初始渲染
@KarimElghamry 添加了整个代码

标签： css reactjs tailwind-css

【解决方案1】：

根据docs，10 不是scale 类的预定义值。要添加one off custom value，您可以执行以下操作：

className={`scale-x-[${percentage1}]`}

0 为 0%，而 1 为 100%。

【讨论】：