如何更改流利的 ui 主要或次要文本颜色？答案

【问题标题】：How to change fluent ui primary or secondary text color?如何更改流利的 ui 主要或次要文本颜色？
【发布时间】：2021-10-29 09:30:36
【问题描述】：

我有一个非常简单的问题。这应该很容易。我无法更改 PersonaDisplay 中的 secondaryText 的颜色。

                 <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'}
                />

它没有得到我的noLongerWorks 类属性：

.noLongerWorks { 
    color: "red";
}

我查看了文档，但什么也没看到，可能遗漏了一个小地方。我也尝试添加手动样式，但没有锁定。

【问题讨论】：

标签： fluent-ui fluentui-react

【解决方案1】：

我找到了感兴趣的答案。您无需添加类来更改样式，您可以通过 styles pros 来应用到 Persona 组件的任何道具。

                    <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: 'red',
                        },
                    }}**
                />

【讨论】：