如何在Fluent UI React V9中向makeStyles传递参数

你遇到的错误核心是违反了React Hook规则——自定义Hook（包括你封装的useStyles）只能在函数组件的顶层或其他自定义Hook内部调用，不能在循环、条件判断或嵌套函数（比如map的回调）中执行。

针对Fluent UI V9的makeStyles，正确传递动态样式参数的方法如下：

正确实现方式 #

重新定义样式，让makeStyles中的类接受动态props，然后在组件顶层调用Hook，最后在循环中传入参数生成对应样式：

import { Button, makeStyles } from "@fluentui/react-components";
import * as React from 'react';

// 定义接受color参数的样式
const useStyles = makeStyles({
  sheetClass: ({ color }: { color: string }) => ({
    color: color,
  }),
});

export const Default = () =>{
  const sheets = [{name:"Test1", tabColor:"red"}, {name:"Test2", tabColor:"green"}];
  // 在组件顶层调用useStyles，符合Hook规则
  const styles = useStyles();

  return (
    <div>
      {sheets.map((sheet) => (
        <div key={sheet.name}>
          {/* 调用styles.sheetClass并传入动态color参数 */}
          <Button className={styles.sheetClass({ color: sheet.tabColor })}>
            {sheet.name}
          </Button>
        </div>
      ))}
    </div>
  );
};

原理说明 #

1. makeStyles支持将类定义为接收props的函数，这样可以根据传入的动态值生成对应的样式类名。
2. useStyles作为Hook在组件顶层调用，避免了违反Hook规则的问题，返回的styles对象包含可接收参数的方法，用于生成动态样式类。

替代方案（不推荐） #

如果只是简单的颜色样式，也可以直接使用内联样式，但这种方式无法利用Fluent UI CSS-in-JS的缓存、主题集成等特性：

<Button style={{ color: sheet.tabColor }}>
  {sheet.name}
</Button>

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