使用Tailwind.css在React.js中动态添加className

Question

假设我有一个React组件，它从props获取Tailwind类名例如：

import React from "react";
export default function Header({navColor}) {
return (
<nav
className="flex justify-center items-center text-white  text-xl h-14"> //I want to add a class that it's name is the (navColor) value to the nav tag 
TEST
</nav>
);
}

如何做到这一点？

Answer 1

您可以使用Template文字来实现

在`内使用${}

<nav
className={`flex justify-center items-center text-white  text-xl h-14 ${navColor}`}> 
TEST
</nav>

Answer 2

import classNames from "classnames";
import React from "react";
export default function Header({ navColor }) {
const headerClass = classNames(
"flex justify-center items-center text-white text-xl h-14",
navColor,
);
return <nav className={headerClass}>TEST</nav>;
}

classNames也是一个不错的选择。您不必担心空格添加错误。