这是我的json：

export const initialInitialPropsSchema: InitialProps[] = [
  { className: 'text-secondary text-5xl font-semibold', label: 'B' },
  { className: 'text-white  text-5xl font-semibold', label: 'M' },
  { className: 'text-tertiary  text-5xl font-semibold', label: 'A' },
];

my header：我在循环中应用类名的地方：

export const Header: FC<{ initials: InitialProps[] }> = ({ initials }) => {
  return (
    <div className="p-5 bg-primary flex justify-between">
      {initials.length &&
        initials.map((initial) => (
          <h1 key={initial.label} className={initial.className}>
            {initial.label}
          </h1>
        ))}
    </div>
  );
};

但是在浏览器中，我看到所有的类名都被应用了。但是没有用元素更新属性。如果我硬编码类名，而不是从json赋值，它会工作得很好。我正在使用Nx workspace with vite作为react app。头文件放在头文件库下面。
在浏览器中，我看到：

• • 更新**

在我的头部分，我只是简单地添加了json中使用的所有类，如下所示：（除回路为静态外）
<h1 className="text-secondary text-tertiary text-white text-5xl font-semibold"></h1>
那么所有的look类都可以工作。会有什么问题？如何解决这个问题？