How to change css of ternary operator based on the word?

Question

I have the following :

<td>${person.gender ? 'Male' : 'Female'}</td>

I want to add some css that will make the text Blue when the work is "Male" and Pink when the word is "Female".

Any idea how this may be achieved?

Answer 1

Create a CSS class .male {color: blue;} and .female {color: pink;} and wrap the text 'Male' or 'Female' inside a <span> which applies either .male or .female as value for "class" attribute.