How to change fluent ui primary or secondary text color?

Question

I have a very simple question. It should be very easy. I can't change color of secondaryText in PersonaDisplay.

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

It does not get my noLongerWorks class properties :

.noLongerWorks { 
    color: "red";
}

I went over the docs but see nothing, probably missing a minor spot. I tried to add manual styling as well but no lock.

score 1 · Answer 1 · answered Oct 29 '21 at 09:43

I found the answer who is interested. You don't need to add a class to change the styling, you can pass styles pros to apply to whatever props of Persona component.

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

How to change fluent ui primary or secondary text color?

1 Answers1