如何在ReactJS中向MUI styled组件的label传递变量

要实现动态生成带myId的唯一标识作为styled组件的label，你可以利用MUI styled函数的label支持函数形式的特性，直接基于组件props生成自定义label，无需给DOM元素添加id属性。具体修改步骤如下：

1. 更新组件Props接口 #

首先在MyThemeComponentProps中添加myId属性，明确支持该参数：

interface MyThemeComponentProps {
  color?: 'primary' | 'secondary';
  variant?: 'normal' | 'dashed';
  myId?: number | string; // 新增myId属性
}

2. 动态生成label #

将styled配置中的label从字符串改为接收props的函数，根据myId拼接出目标标识，同时处理myId未传入的默认情况：

const MyThemeComponent = styled('div', {
  shouldForwardProp: (prop) =>
    prop !== 'color' && prop !== 'variant' && prop !== 'sx' && prop !== 'myId', // 新增排除myId，避免转发到DOM
  label: (props) => `MyThemeComponent-${props.myId ?? 'default'}`, // 动态生成带myId的label
  slot: 'Root',
  overridesResolver: (props, styles) => [
    styles.root,
    props.color === 'primary' && styles.primary,
    props.color === 'secondary' && styles.secondary,
  ],
})<MyThemeComponentProps>(({ theme }) => ({
  backgroundColor: 'aliceblue',
  padding: theme.spacing(1),
}));

3. 使用组件时传入myId #

在组件调用时传入myId参数，即可生成对应的唯一标识：

export default function UsingOptions() {
  return (
    <ThemeProvider theme={customTheme}>
      <MyThemeComponent sx={{ m: 1 }} color="primary" variant="dashed" myId={123}>
        Primary
      </MyThemeComponent>
      <MyThemeComponent sx={{ m: 1 }} color="secondary" myId={456}>
        Secondary
      </MyThemeComponent>
      {/* 未传入myId时会使用default作为后缀 */}
      <MyThemeComponent sx={{ m: 1 }}>
        Default
      </MyThemeComponent>
    </ThemeProvider>
  );
}

效果说明 #

修改后，生成的CSS类名会包含你自定义的标识，比如第一个组件的类名将类似MyThemeComponent-123-root，第二个为MyThemeComponent-456-root，未传myId的则为MyThemeComponent-default-root，完全符合你要的MyThemeComponent-myId格式的唯一标识需求，且不会给DOM元素添加额外的id属性。

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