With FluentUI React v9, how to change the color of the primaryText and secondaryText?

Question

With FluentUI React v9, how to change the color of the name and secondaryText for only one specific component (not globally in the theme)?

This sample sucessfully change the background to red but I can't find a way to change the text color:

const useClasses = makeStyles({
  xxx: {
    backgroundColor: 'red',
    color: tokens.colorNeutralForegroundInverted
  }
});

const UserPersona = () => {
  const classes = useClasses();

  return (
    <Persona
      className={classes.xxx}
      name='abc'
      secondaryText='xyz'
    />
  );
};

Using this works but it's probably not the best solution:

primaryText={<span className="text-white">{fullname}</span>}
secondaryText={<span className="text-white">{role}</span>}

or better

const textColor = `text-[color:${tokens.colorNeutralForegroundInverted}]`;

...

primaryText={<span className={textColor}>{fullname}</span>}
secondaryText={<span className={textColor}>{role}</span>}

How to make it works with makeStyles ?

Answer 1

Both slots, primaryText and secondaryText, have a default color set (colorNeutralForeground1). Therefore setting the color of their parent has no effect. You need to add a class to the specific slots to overwrite that default color:

export const ColoredPersona = () => {
  const classes = useClasses();

  return (
    <Persona
      className={classes.xxx}
      primaryText={{ children: 'abc', className: classes.text }}
      secondaryText={{ children: 'xyz', className: classes.text }}
    />
  );
};

const useClasses = makeStyles({
  xxx: {
    backgroundColor: 'red',
  },
  text: {
    color: tokens.colorNeutralForegroundInverted,
  },
});