前言

在实际应用中，有的时候需要根据变量动态调整元素样式。

书写

<Button
 size="xs"
 className={`bg-[#21242a] text-xs mt-1 mb-1 
 ${isSelecting?'w-20':"w-full"}`}
 onClick={() => {
      setIsSelecting(!isSelecting);
  }}
  >
{isSelecting ? "Done" : "Edit track"}

 className={`bg-[#21242a] text-xs mt-1 mb-1  ${isSelecting?'w-20':"w-full"}`}

解读语法：

1.在 JSX 中，最外层的 {} 被用来嵌入 JavaScript 表达式。这是 React 和 JSX 的一个特性，允许你将动态内容如变量、函数调用、条件表达式等插入到渲染的输出中。
2.中间使用了ES6的模版字符，在模板字符串中，可以用 ${} 来包裹一个 JavaScript 表达式，该表达式的结果将被转换为字符串并插入到模板字符串的相应位置。