Stili e CSS

Come posso aggiungere una classe CSS al mio componente?

Puoi utilizzare l’apposita prop className, e passare al suo interno una stringa con il nome della classe che vuoi utilizzare.

render() {
  return <span className="menu navigation-menu">Menu</span>
}

Una pratica comune è quella di applicare o rimuovere classi CSS in base allo state o alle props del componente:

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Menu</span>
}

Suggerimento

Se ti ritrovi spesso a scrivere codice in questo modo, il package classnames potrebbe esserti utile.

Posso utilizzare inline styling?

Si, consulta la documentazione a riguardo qui.

Utilizzare inline styling è una cattiva idea?

In linea di massima, l’utilizzo di classi comporta una performance migliore rispetto all’inline styling.

Che cos’è CSS-in-JS?

Con “CSS-in-JS” si intende la pratica di definire styling CSS direttamente all’interno di un file JavaScript, anziché utilizzare dei file esterni.

Tieni presente che questa funzionalità non è parte di React, ma è fornita da librerie esterne. React non fornisce particolari indicazioni su come e dove definire lo styling. Nel dubbio, un buon punto di partenza é quello di definire il tuo styling in un file *.css separato, ed utilizzare cio che é definito al suo interno tramite className.

Posso utilizzare animazioni in React?

React può essere utilizzato per qualsiasi tipo di animazione. Prova a dare un’occhiata a React Transition Group, React Motion, React Spring o Framer Motion, per esempio.