如何修改Fluent UI的primary或secondary文本颜色？

• 你编写的CSS规则存在语法错误：color属性的取值"red"多了多余的双引号，CSS中颜色关键字不需要包裹引号，该规则本身无法生效。
• Persona 组件的次级文本由内部独立的子元素承载，自带.ms-Persona-secondaryText默认样式类，预设了字体颜色规则，样式优先级高于你给组件根节点设置的color属性，因此根节点的样式无法向下覆盖到次级文本。
• 你当前定义的.noLongerWorks类仅作用于组件根容器，没有命中实际承载secondaryText的子元素。

方案1：调整CSS规则（适合需要全局统一管控样式的场景） #

先修正CSS语法，同时调整选择器精准命中次级文本元素，可按需添加!important提升优先级覆盖默认样式：

.noLongerWorks .ms-Persona-secondaryText {
    color: red;
}

同时建议修改组件className的赋值逻辑，避免条件不满足时传入false值被错误渲染：

<Persona
    text="{User.displayName}"
    secondaryText={User.currentEmployee === 'true' && 'No longer works'}
    size={PersonaSize.size48}
    imageUrl={'/_layouts/15/userphoto.aspx?size=S&accountname=' + this.props.User.name}
    className={User.currentEmployee === 'true' ? 'noLongerWorks' : ''}
/>

方案2：使用组件原生styles属性配置（更推荐） #

Fluent UI Persona组件原生支持传入styles属性，可直接为各个子模块自定义样式，无需额外编写全局CSS，也不存在样式优先级冲突问题：

<Persona
    text="{User.displayName}"
    secondaryText={User.currentEmployee === 'true' && 'No longer works'}
    size={PersonaSize.size48}
    imageUrl={'/_layouts/15/userphoto.aspx?size=S&accountname=' + this.props.User.name}
    styles={{
        secondaryText: {
            color: User.currentEmployee === 'true' ? 'red' : 'inherit'
        }
    }}
/>

内容的提问来源于stack exchange，提问作者Ömer Keskinkilic