使用变量时顺风不起作用(React.js)
使用变量时顺风不起作用(React.js)
提问于 2021-12-25 01:47:29
目前一直面临着这个问题，使用顺风和使可重复使用的反应组件，您可以通过作为支柱，一些风格作为顺风类。实际的问题是"pb-{number}“的性质。我可以通过这条路，工作会很好的。这也发生在“边框-{number}”属性中，但在某种程度上它接受边框-2和边框-4(只有这些)。
import './button.css'
export default function Button({
color = "orange",
inset = "pb-3", <--- this will work
border = "border-8",
className,
onClick,
link
, ...props}){
return (
<div onClick={onClick}
className={`btn-${color} ${border}
${className} ${inset}`}> <--- this will work
<div>
{props.children}
</div>
</div>但是，如果我试图使它更干净，所以不使用顺风的人只需要传递一个值(如下面的例子)，它就行不通了。
import './button.css'
export default function Button({
color = "orange",
inset = "1", <--- this
border = "4",
className,
onClick,
link
, ...props}){
return (
<div onClick={onClick}
className={`btn-${color} border-${border}
${className} pb-${inset}`}> <--- this wont work
<div>
{props.children}
</div>
</div>
)
}我真的不知道为什么会这样。希望有更多经验的人能澄清我的疑虑。提前谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-06-05 13:15:40
在顺风中，您不能使用像bg-${color}这样的动态类命名，尽管我们可以将它模拟为那样，但它不是首选的。因为Tailwind编译了它的CSS，所以它会查找所有的代码，并检查一个类名是否匹配。
对于你的方法，你可以试试这个。
const Button = () => {
const color = "red-500";
const inset = "3";
const border = "border-8";
return <div className={`bg-${color} ${border} pb-${inset}`}>Hello</div>;
};
export default Button;采用适当的padding输出
但是，尝试避免这种解决办法，因为Tailwind不建议这样做。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70477538
复制相关文章
相似问题
腾讯云开发者
