Next.js自定义ElementTile组件被渲染为div的原因与解决方法

问题原因 #

这是React的正常行为：自定义React组件只是虚拟DOM层面的抽象，最终编译后会被替换成组件内部返回的原生HTML元素。你的ElementTile组件返回的是<div>，所以真实DOM里只会出现这个div，<ElementTile>这个自定义标签不会出现在浏览器的DOM树中，自然针对它的CSS规则就找不到目标元素了。

解决方法 #

方法1：调整CSS选择器（最简便） #

既然最终渲染的是带class的div，直接修改CSS选择器匹配对应的class即可：

1. 给ElementTile的根div添加一个统一的基础class（推荐）：
   在ElementTile.tsx中修改根div的className：

<div className={`element-tile flex aspect-square cursor-pointer text-center items-center justify-center duration-300 text-xs md:text-xl xl:text-2xl text-black p-1 md:p-2 xl:p-4 border-[#404040] sm:border-2 hover:border-4 hover:z-10 hover:border-black p-auto ${className}`}>

2. 然后CSS中用这个class写规则：

.element-tile {
  /* 你的ElementTile基础样式 */
}

如果要针对不同颜色的tile写样式，直接用你传入的bg-cyan-500这类class即可。

方法2：使用Web Components实现自定义标签（适合需要原生标签的场景） #

如果一定要让浏览器中出现自定义标签，可以结合Web Components：

1. 先定义一个自定义元素：

class ElementTileElement extends HTMLElement {
  connectedCallback() {
    // 可在此初始化元素内容与逻辑
  }
}
// 注册自定义元素，标签名必须包含连字符
customElements.define('element-tile', ElementTileElement);

2. 在React组件中使用这个自定义元素（注意标签名要小写带连字符）：

return (
  <element-tile
    className={`flex aspect-square cursor-pointer text-center items-center justify-center duration-300 text-xs md:text-xl xl:text-2xl text-black p-1 md:p-2 xl:p-4 border-[#404040] sm:border-2 hover:border-4 hover:z-10 hover:border-black p-auto ${className}`}
    onClick={() => {
      if (elementData) {
        togglePopUp();
      }
    }}
  >
    {elementData ? elementData.kurzsymbol : '↓'}
    {isPopUpVisible && (
      <ElementPopUp onClose={togglePopUp} elementData={elementData} />
    )}
  </element-tile>
);

这种方式需要处理React与Web Components的兼容性问题（比如属性传递、事件绑定），一般普通React项目用方法1就足够满足需求。

内容的提问来源于stack exchange，提问作者Bambi