使用ClassNameMap或Record<string,string>传递组件样式时类型错误如何解决

报错原因 #

ClassNameMap是Material UI中makeStyles返回的样式对象集合，类型为键值对结构（key是自定义的样式名，value是生成的类名字符串）。你当前代码直接传递了styles.flex，这是单个类名字符串，和Props中定义的classes?: ClassNameMap类型冲突，因此触发类型报错。

解决方案 #

方案1：保留classes字段，传递多个样式（推荐，可满足多样式传递需求） #

直接传递整个样式对象，或按需筛选需要传递的样式组成对象即可：

1. 父组件传值修改

const getAllList=labelNames.map((name: string):ReactNode => {
 return (<Load
            label={name}
            // 可直接传整个styles对象，也可按需挑选需要的样式
            classes={styles} 
            // 只传部分样式写法：classes={{flex: styles.flex, label: styles.label}}
            width={"100%"}
            onDataChange={(value: string, data: string): void => {
            }}
          />);
});

2. Load组件类型优化与使用
   可给ClassNameMap增加泛型约束，避免样式键名拼写错误，使用时直接取对应键的值即可：

interface Props {
  width: string;
  label: string;
  // 泛型约束允许传入的样式key
  classes?: ClassNameMap<'flex' | 'label'>;
  onDataChange: (selectedvalue: string, data: string) => void;
}

// 组件内使用示例
const Load = (props: Props) => {
  return <div>
    <div className={props.classes?.flex}>flex容器</div>
    <span className={props.classes?.label}>标签</span>
  </div>
}

方案2：修改Props类型，直接传递类名字符串 #

如果不需要传递完整的样式对象，只需要传类名字符串，可调整Props定义：

interface Props {
  width: string;
  label: string;
  // 支持传单个类名或多个类名数组
  classNames?: string | string[];
  onDataChange: (selectedvalue: string, data: string) => void;
}

父组件传值：

// 传单个类名
classNames={styles.flex}
// 传多个类名
classNames={[styles.flex, styles.label]}

Load组件内使用：

const Load = (props: Props) => {
  const className = Array.isArray(props.classNames) ? props.classNames.join(' ') : props.classNames
  return <div className={className}></div>
}

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