Como Usar Operador Ternário No Style No React

Alguma vez você já precisou adicionar um estilo em algum elemento baseado em uma condição?
Você sabe como adicionar um operador ternário no estilo, no React?
É muito simples, só precisamos nos atentar na quantidade de chaves {}!

Vamos imaginar um cenário onde queremos que a cor onde está escrita a nota do aluno seja diferente de acordo com a situação dele.
Caso a nota seja maior que 6, deve exibir a nota em azul.
Caso a nota seja menor que 6, deve exibir a nota em vermelho
Então, para fazermos essa condição, usaremos o operador ternário no react, no elemento p, da seguinte forma:

1
<p style={notaAluno > 6 ? { color: "blue" } : { color: "red" }}>{notaAluno}</p>

Ou também podemos fazer:

1
<p style={{ color: notaAluno > 6 ? "blue" : "red" }}>{notaAluno}</p>

Particularmente, eu prefiro essa última opção, mas você pode usar a que achar que fica mais legível, entendível!