Next.js可复用Heading组件标签尺寸渲染异常问题排查

你的Heading组件虽然能正确渲染对应层级的h标签，但所有层级都套用了完全相同的字号类（text-xl md:text-2xl lg:text-3xl），所以不同层级的标题自然没有样式差异。

修改后的组件代码 #

import React from 'react';
import PropTypes from 'prop-types';

const Heading = ({ level, children, className }) => {
  const HeadingTag = `h${level}`;
  // 为每个标题层级定义对应的响应式字号类
  const sizeClasses = {
    1: 'text-3xl md:text-4xl lg:text-5xl',
    2: 'text-2xl md:text-3xl lg:text-4xl',
    3: 'text-xl md:text-2xl lg:text-3xl',
    4: 'text-lg md:text-xl lg:text-2xl',
    5: 'text-base md:text-lg lg:text-xl',
    6: 'text-sm md:text-base lg:text-lg'
  };

  return (
    <HeadingTag
      className={`font-bold ${sizeClasses[level]} ${className}`}
    >
      {children}
    </HeadingTag>
  );
};

Heading.propTypes = {
  level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).isRequired,
  children: PropTypes.node.isRequired,
  className: PropTypes.string
};

Heading.defaultProps = {
  className: ''
};

export default Heading;

说明 #

• 新增sizeClasses对象，为h1到h6每个层级分配了差异化的响应式字号类，确保标题层级从大到小依次呈现视觉差异。
• 保留原有的font-bold字体粗细设置，同时保留自定义className的拼接逻辑，不影响额外样式的传入。
• 你可以根据自己的设计规范，调整sizeClasses里的类名，修改不同断点下的字号大小。

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