咨询：Fluent UI v9/Fluent UI 2中动态CSS样式的实现方案

以下是几种无需依赖样式优先级覆盖的动态样式实现方法，均适配Fluent UI新版Hook式样式体系：

1. 直接在内置样式Hook中结合props动态生成样式 #

Fluent UI v9的内置样式Hook（如useButtonStyles、useCardStyles）支持接收自定义参数，可直接在Hook调用时基于组件props调整样式规则：

import { useButtonStyles, Button } from '@fluentui/react-components';

const CustomButton = ({ isHighlighted, children, ...restProps }) => {
  const buttonStyles = useButtonStyles({
    ...restProps,
    root: ({ tokens }) => ({
      backgroundColor: isHighlighted 
        ? tokens.colorPalette.brand.background 
        : tokens.colorPalette.neutral.background1,
      borderRadius: isHighlighted ? '8px' : '4px',
    }),
  });

  return <Button styles={buttonStyles} {...restProps}>{children}</Button>;
};

2. 用makeStyles创建带参数的自定义样式Hook #

通过makeStyles定义可接收动态参数的样式工厂，在组件内部调用时传入props值，实现样式的动态计算：

import { makeStyles, Button, Theme } from '@fluentui/react-components';

const useCustomButtonStyles = makeStyles((theme: Theme, params: { isDisabled: boolean }) => ({
  root: {
    opacity: params.isDisabled ? 0.5 : 1,
    cursor: params.isDisabled ? 'not-allowed' : 'pointer',
    '&:hover': {
      backgroundColor: params.isDisabled 
        ? theme.colorPalette.neutral.background2 
        : theme.colorPalette.brand.backgroundHover,
    },
  },
}));

const CustomButton = ({ isDisabled, children, ...restProps }) => {
  const styles = useCustomButtonStyles({ isDisabled });
  return <Button className={styles.root} {...restProps}>{children}</Button>;
};

3. 结合CSS变量实现动态样式 #

在组件根元素上设置动态CSS变量，再在样式中引用这些变量，适合需要频繁切换的样式状态：

import { useButtonStyles, Button } from '@fluentui/react-components';

const CustomButton = ({ isActive, children, ...restProps }) => {
  const baseStyles = useButtonStyles();
  const inlineStyle = {
    '--button-border-color': isActive ? '#0078d4' : '#eaeaea',
    '--button-text-color': isActive ? '#ffffff' : '#323130',
  };

  return (
    <Button
      styles={{
        ...baseStyles,
        root: {
          ...baseStyles.root,
          borderColor: 'var(--button-border-color)',
          color: 'var(--button-text-color)',
          transition: 'all 0.2s ease',
        },
      }}
      style={inlineStyle}
      {...restProps}
    >
      {children}
    </Button>
  );
};

这些方法均无需依赖样式优先级覆盖，能优雅适配Fluent UI v9的样式体系，实现动态样式逻辑。

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