In questo tutorial, esploreremo come utilizzare componenti con stili in un'applicazione React per creare stili modulari, riutilizzabili e dinamici. Inizieremo con le basi dell'installazione e dell'utilizzo del styled-componentspacchetto, quindi passeremo alla creazione di componenti con stili personalizzati con stili dinamici.

Prerequisiti

Prima di iniziare, assicurati di aver installato quanto segue sul tuo sistema:

• Node.js e npm (o filato)
• Un editor di codice (ad es. VS Code, Sublime Text)

Innanzitutto, installiamo il styled-componentspacchetto eseguendo il seguente comando nel tuo terminale:

npm install styled-components

import React from 'react';
import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: #008CBA;
  color: white;
  font-size: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
  border: none;
`;

const App = () => {
  return (
    <div>
      <h1>Hello World</h1>
      <StyledButton>Click me</StyledButton>
    </div>
  );
}

export default App;

Creazione di stili dinamici con oggetti di scena

Uno dei vantaggi dell'utilizzo styled-componentsè la possibilità di creare stili dinamici basati su oggetti di scena. Modifichiamo il nostro StyledButtoncomponente per avere diversi colori di sfondo basati su un primaryoggetto di scena.

const StyledButton = styled.button`
  background-color: ${props => props.primary ? '#008CBA' : '#E6E6E6'};
  color: white;
  font-size: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
  border: none;
`;

<StyledButton>Default button</StyledButton>
<StyledButton primary>Primary button</StyledButton>

Un altro vantaggio dell'utilizzo styled-componentsè la possibilità di creare componenti con stili riutilizzabili. Creiamo un Cardcomponente con uno stile personalizzato che possiamo riutilizzare in tutta la nostra applicazione.

const Card = styled.div`
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  padding: 1em;
  border-radius: 3px;
`;

<Card>
  <h2>Card title</h2>
  <p>Card content</p>
</Card>

styled-componentsfornire un modo potente e flessibile per modellare i tuoi componenti React. Offrono numerosi vantaggi, tra cui modularità, stili con ambito, stili dinamici e migliore leggibilità. In questo tutorial, abbiamo esplorato le basi dell'utilizzo styled-components, della creazione di stili dinamici con oggetti di scena e della creazione di componenti con stili riutilizzabili. Con questa conoscenza, puoi iniziare a utilizzare styled-componentsnelle tue applicazioni React e trarne vantaggio.