如何在FluentUI React v9中用makeStyles单独修改Persona文本颜色

要仅针对单个Persona组件修改primaryText（姓名）和secondaryText的颜色，同时保留makeStyles实现方式，可以通过CSS后代选择器定位组件内部文本元素来实现，无需全局修改主题。具体方案如下：

实现思路 #

FluentUI React v9的Persona组件会为内部文本元素生成固定的BEM类名：

• primaryText对应的类名：fui-Persona__primaryText
• secondaryText对应的类名：fui-Persona__secondaryText

我们可以在makeStyles定义的容器样式中，通过后代选择器嵌套这些类名，精准设置目标文本的颜色，同时保证样式仅作用于当前Persona组件。

代码示例 #

import { makeStyles } from '@fluentui/react-components';
import { Persona } from '@fluentui/react-components';

// 定义自定义样式
const useStyles = makeStyles({
  customPersona: {
    // 已实现的背景色修改
    backgroundColor: 'red',
    // 自定义primaryText颜色
    '& .fui-Persona__primaryText': {
      color: '#ffffff',
    },
    // 自定义secondaryText颜色
    '& .fui-Persona__secondaryText': {
      color: '#e0e0e0',
    },
  },
});

export const CustomStyledPersona = () => {
  const styles = useStyles();

  return (
    <Persona
      className={styles.customPersona}
      primaryText="Jane Smith"
      secondaryText="Product Designer"
      image="https://via.placeholder.com/40"
    />
  );
};

关键说明 #

1. 样式优先级：通过容器类+内部元素类的组合选择器，确保自定义样式优先级高于组件默认样式，无需使用!important。
2. 作用范围：仅添加了customPersona类名的Persona组件会应用该样式，全局其他Persona不受影响。
3. 类名稳定性：FluentUI v9的组件类名采用fui-前缀的BEM规范，属于稳定的公开API，不会轻易变更。

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