Aquí hay mucha sintaxis elegante de ES6. Lo desglosaré línea por línea.

Las dos primeras líneas,

 background: transparent; border-radius: 3px; border: 2px solid palevioletred; color: palevioletred; margin: 0 1em; padding: 0.25em 1em;

son solo CSS básico para aplicar al elemento. Luego, tenemos un ${} que nos permite usar un objeto JS dentro del literal de la plantilla. Aquí, el código usa funciones de flecha, => que es muy similar a una función anónima. Estos son todos equivalentes:

 () => { // do things } function () { // do things } () => /* do a single line expression and return */

Entonces, en la interpolación, el código solo está haciendo una función. En los componentes con estilo, una interpolación con una función significa algo de CSS que depende de los argumentos del componente, por lo que podría especificar argumentos como color , font , background-preset , etc.

Entonces, lo que hace el operador && es que puede considerarse como un "si" abreviado. Desde MDN:

Más generalmente, el operador devuelve el valor del primer operando falso encontrado al evaluar de izquierda a derecha, o el valor del último operando si son todos verdaderos.

Entonces, si props.primary es verdadero, devolverá el CSS,

 background: palevioletred; color: white;

pero si no es así, devolverá lo que sea props.primary . En el ejemplo, props.primary es true o undefined . Cuando no está undefined , devuelve undefined . Citando de los documentos de componentes con estilo :

Hablando de eso, durante el aplanamiento, los componentes con estilo ignoran las interpolaciones que se evalúan como indefinidas, nulas, falsas o una cadena vacía (""), lo que significa que puede usar la evaluación de cortocircuito para agregar condicionalmente reglas CSS.

Entonces, cuando devuelve componentes con estilo undefined , simplemente lo ignorará.