I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione. Per saperne di più.

Usando React, è tipico salvare i tuoi stili in un file CSS globale. Ciò può rendere difficile individuare lo stile per componenti specifici, soprattutto quando si lavora su un progetto di grandi dimensioni. Con i componenti con stile, trovare lo stile per un particolare componente è facile perché si trovano nello stesso file del componente.

Vediamo come configurare e integrare i componenti con stile nella tua applicazione React.

Installazione della libreria dei componenti in stile

Puoi installare styled-components eseguendo questo comando nel tuo terminale:

npm i componenti in stile

Per installare i componenti in stile utilizzando il filato, eseguire:

il filato aggiunge componenti in stile

Creazione di un componente con stile

Un componente con stile è proprio come un componente React standard, con stili. Ce ne sono vari

instagram viewer
pro e contro dei componenti con stile, che sono importanti da considerare per un uso corretto.

La sintassi generale è simile a questa:

importare stile da"componenti in stile";

cost ComponentName = con stile. DOMElementTag`
 cssProperty: cssValue
`

Qui si importa stile dal componente di stile biblioteca. IL stile function è un metodo interno che converte il codice JavaScript in CSS effettivo. IL Nome del componente è il nome del componente con stile. IL DOMElementTag è l'elemento HTML/JSX a cui intendi applicare lo stile, ad esempio div, span, button, ecc.

Per creare un pulsante con stile utilizzando un componente con stile, devi prima creare un componente React contenente un elemento pulsante.

Così:

importare Reagire da"reagire";
funzionePulsante() {
ritorno (

Ora puoi creare uno stile per il pulsante usando styled-components:

importare stile da"componenti in stile";
cost StyledButton = styled.button`
 imbottitura: 1rem 0.8rem;
 raggio del bordo: 15px;
 colore di sfondo: grigio;
 colore: #FFFFFF;
 dimensione del font: 15px;
`

Mettendo tutto insieme, dovrai sostituire il pulsante etichetta con il Pulsante in stile componente:

importare stile da"componenti in stile";
importare Reagire da"reagire";
cost StyledButton = styled.button`
 imbottitura: 1rem 0.8rem;
 raggio del bordo: 15px;
 colore di sfondo: grigio;
 colore: #FFFFFF;
 dimensione del font: 15px;
`
funzionePulsante() {
ritorno (
Benvenuto!!!</StyledButton>
 )
}

Stili di nidificazione

Puoi anche nidificare gli stili quando lavori con componenti con stili. L'annidamento dei componenti in stile è un po' come utilizzando il linguaggio di estensione SASS/SCSS. È possibile nidificare gli stili se un componente contiene più tag di elementi e desidera applicare uno stile a ciascun tag singolarmente.

Per esempio:

importare Reagire da'reagire';
funzioneApp() {
ritorno (


Componenti con stile</h1>




Benvenuto in styled-components</p>
 </div>
 )
}

Questo codice crea un componente contenente un file h1 elemento e a P elemento.

Puoi applicare uno stile a questi elementi utilizzando la funzione di stile nidificato dei componenti con stile:

importare Reagire da'reagire';
importare stile da'componenti in stile';
cost StyledApp = styled.div`
 colore: #333333;
 text-align: centro;


 h1 {
 dimensione del font: 32px;
 stile del carattere: corsivo;
 font-weight: grassetto;
 spaziatura del carattere: 1.2rem;
 text-transform: maiuscolo; 
 }


 P {
 margine-blocco-inizio: 1rem;
 dimensione del font: 18px;
 }
`
funzioneApp() {
ritorno (

Componenti con stile</h1>




Benvenuto in styled-components</p>
 </StyledApp>
 )
}

Questo codice utilizza un componente con stile e nidifica lo stile per il h1 E P tag.

Creazione e utilizzo di variabili

La capacità di creare variabili è una caratteristica notevole della libreria dei componenti di stile. Questa capacità garantisce uno stile dinamico in cui è possibile utilizzare le variabili JavaScript per determinare gli stili.

Per utilizzare le variabili nei componenti di stile, crea una variabile e assegnale un valore di proprietà CSS. Puoi quindi utilizzare quella variabile direttamente nel tuo CSS, ad esempio:

importare stile da"componenti in stile";
cost Colore principale = "rosso";


cost Intestazione = styled.h1`
 colore: ${MainColor};
`;
funzioneApp() {
ritorno (
 <>
Ciao Mondo!</Heading>
 </>
 );
}

Nel blocco di codice sopra, il testo "Ciao mondo!” verrà visualizzato in colore rosso.

Si noti che questo esempio utilizza semplicemente una variabile JavaScript standard in un modello letterale insieme al componente con stile. È un approccio diverso da utilizzando le variabili CSS.

Estendere gli stili

Dopo aver creato un componente con stile, utilizzerai il componente. Potresti voler fare sottili differenze o aggiungere più stile in alcune situazioni. In casi come questo, puoi estendere gli stili.

Per estendere gli stili, avvolgi il componente con stile nel file con stile() costruttore e quindi includere eventuali stili aggiuntivi.

In questo esempio, il PrimaryButton eredita lo stile del componente Button e aggiunge un diverso colore di sfondo blu.

importare stile da"componenti in stile";
importare Reagire da"reagire";
cost Button = styled.button`
 imbottitura: 1rem 0.8rem;
 raggio del bordo: 15px;
 colore di sfondo: grigio;
 colore: #FFFFFF;
 dimensione del font: 15px;
`


cost PrimaryButton = con stile (pulsante)`
 colore di sfondo: blu;
`
funzioneApp() {
ritorno (

È inoltre possibile modificare il tag visualizzato da un componente con stile utilizzando il file COME un puntello.

IL COME prop ti consente di specificare l'elemento HTML/JSX sottostante con cui il componente con stile eseguirà il rendering.

Per esempio:

importare stile da"componenti in stile";
importare Reagire da"reagire";
cost Button = styled.button`
 imbottitura: 1rem 0.8rem;
 raggio del bordo: 15px;
 colore di sfondo: grigio;
 colore: #FFFFFF;
 dimensione del font: 15px;
`
funzioneApp() {
ritorno (

Questo codice rende il Pulsante componente come un UN elemento, impostando il suo href attribuire a '#'.

Creazione di stili globali

I componenti con stile sono generalmente limitati a un componente, quindi potresti chiederti come definire lo stile dell'applicazione nel suo insieme. Puoi modellare l'applicazione con l'uso dello stile globale.

Styled-Components offre a createGlobalStyle funzione che consente di dichiarare gli stili a livello globale. IL createGlobalStyle rimuove il vincolo dello stile con ambito componente e consente di dichiarare stili che si applicano a ogni componente.

Per creare stili globali, importare il file createGlobalStyle funzione e dichiarare gli stili richiesti.

Per esempio:

importare {createGlobalStyle} da'componenti in stile';
cost GlobalStyles = createGlobalStyle`
 @importare URL(' https://fonts.googleapis.com/css2?family=Montserrat&display=swap');


 * {
 margine: 0;
 imbottitura: 0;
 dimensionamento della scatola: border-box;
 }


 corpo {
 colore di sfondo: #343434;
 dimensione del font: 15px;
 colore: #FFFFFF;
 famiglia di font: 'Monserrato', sans serif; 
 }
`
esportarepredefinito Stili globali;

Quindi importi il ​​file GlobalStyles component nel componente dell'app ed eseguirne il rendering. Rendere il GlobalStyles componente nel componente dell'app applicherà gli stili alla tua applicazione.

Così:

importare Reagire da'reagire';
importare GlobalStyles da'./Globale';
funzioneApp() {
ritorno (



 </div>
 )
}

Altro su Componenti con stile

Hai imparato come configurare, installare e utilizzare i componenti con stile nella tua applicazione React. La libreria dei componenti in stile è un modo efficiente per modellare la tua applicazione React. Fornisce molte funzioni utili che consentono flessibilità nello stile e nello stile dinamico.

C'è molto di più nei componenti con stile, come le animazioni, e React è un grande framework con molto da imparare oltre a questo.