Next.js 14中导入外部TS文件的TailwindCSS复用类名对象样式不生效的问题求助

我最近碰到个棘手的问题，想请教下各位大佬！我定义了一个存放可复用TailwindCSS类名的对象，原本打算在整个项目里统一复用，但现在发现只有把这个对象直接写在React组件文件内部时，样式才会生效；从外部TS常量文件导入的话，虽然对应的类名会出现在DOM元素上，但完全没有样式效果。

先给大家贴一下我的代码：

外部常量文件 constants.ts（我想复用这个对象，比如这么用：className={ElementTypeColors[type]}） #

export const ElementTypeColors: { [key in IElementType]: string } = {
  'alkali metal': 'bg-lime-400 dark:bg-lime-800',
  metalloid: 'bg-yellow-400 dark:bg-yellow-900',
  actinide: 'bg-orange-400 dark:bg-orange-900',
  'alkali earth metal': 'bg-red-400 dark:bg-red-800',
  'reactive non-metal': 'bg-blue-400 dark:bg-blue-800',
  'unknown type': 'bg-gray-400 dark:bg-gray-700',
  'transition metal': 'bg-violet-400 dark:bg-violet-800',
  'noble gas': 'bg-fuchsia-400 dark:bg-fuchsia-800',
  'post-transition metal': 'bg-teal-400 dark:bg-teal-800',
  lanthanide: 'bg-sky-400 dark:bg-sky-800',
};

组件文件 Component.tsx 中的使用方式 #

<Card className={`border-none p-1 col-span-1 ${ElementTypeColors[element.Type]}`}>

目前的问题是：上面这段组件代码，只有把ElementTypeColors对象直接声明在组件内部时才能正常工作，从外部constants.ts导入的话就完全没样式效果。

这实在太不利于维护了！以后要是想修改某个类型的配色，我得手动去每个写了这个对象的组件里改一遍，根本不是长久之计。我用的技术栈是Next.js 14 + React 18，有没有大佬知道怎么解决这个问题？万分感谢！

备注：内容来源于stack exchange，提问作者0mppu