React组件传递className样式失效：默认与传入样式均不渲染问题问询

问题根源 #

1. 类名拼接错误：原代码使用join('')拼接类名，会导致多个类名无空格合并（比如"tablepaymentTable"），浏览器无法识别为两个独立类名；同时当className未传入时，数组包含undefined，拼接后会生成无效类名"tableundefined"，直接导致默认样式失效。
2. 父组件导入语法错误：import Table '../Table';缺少from关键字，会导致组件无法正确加载。

修复后的代码 #

Table组件

import React from 'react';
import styles from './Table.module.scss';

const Table = ({ 
  children,
  className 
}: { 
  children: React.ReactNode; 
  className?: string 
}) => {
  // 过滤无效值并添加空格分隔类名
  const combinedClasses = [styles.table, className].filter(Boolean).join(' ');
  return <table className={combinedClasses}>{children}</table>;
};

父组件（PaymentTable）

import React from 'react';
import styles from './PaymentTable.module.scss';
import Table from '../Table'; // 修复import语法

interface Props {
  children: React.ReactNode;
}

const PaymentTable: React.FC<Props> = ({ children }) => {
  return (
    <Table className={styles.paymentTable}>
      {children}
    </Table>
  );
};
export default PaymentTable;

修复说明 #

• filter(Boolean)会自动移除数组中的undefined、空字符串等无效值，确保只有有效类名参与拼接。
• join(' ')保证多个类名之间有空格分隔，符合HTML类名的规范，让CSS选择器能正确匹配。
• 修复import语法后，父组件才能正常加载Table组件，避免因组件未初始化导致的样式异常。

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