Come utilizzare i componenti con stile in React

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 impostare 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 styled-components


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

yarn add styled-components


Creazione di un componente con stile

Un componente con stile è proprio come un componente React standard, con stili. Ci sono vari pro e contro dei componenti in stile, che è importante considerare per un uso corretto.

La sintassi generale è simile a questa:

import styled from "styled-components";


const ComponentName = styled.DOMElementTag`
    cssProperty: cssValue
`


Qui si importa lo stile dalla libreria dei componenti con stile . La funzione stilizzata è un metodo interno che converte il codice JavaScript in CSS effettivo. ComponentName è 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ì:

import React from "react";


function Button() {
    return (
        <button>Welcome!!!</button>
    )
}


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

import styled from "styled-components";


const StyledButton = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

Mettendo tutto insieme, dovrai sostituire il tag del pulsante con il componente StyledButton :

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


const StyledButton = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

function Button() {
    return (
        <StyledButton>Welcome!!!</StyledButton>
    )
}


Stili di nidificazione

Puoi anche nidificare gli stili quando lavori con componenti con stili. L’annidamento dei componenti in stile è un po’ come usare 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:

import React from 'react';


function App() {
    return (
        <div>
            <h1>Styled Components</h1>
            <p>Welcome to styled-components</p>
        </div>
    )
}


Questo codice crea un componente contenente un elemento h1 e un elemento p .

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

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


const StyledApp = styled.div`
    color: #333333;
    text-align: center;

function App() {
    return (
        <StyledApp>
            <h1>Styled Components</h1>
            <p>Welcome to styled-components</p>
        </StyledApp>
    )
}


Questo codice utilizza un componente con stile e nidifica lo stile per i tag h1 e p .

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:

import styled from "styled-components";


const MainColor = "red";

function App() {
    return (
        <>
            <Heading>Hello World!</Heading>
        </>
    );
}


Nel blocco di codice in alto, il testo “ Hello World! ” 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 dall’utilizzo delle 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, racchiudi il componente con stile nel costruttore styled() e quindi includi eventuali stili aggiuntivi.

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

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


const Button = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

function App() {
    return (
        <Button>Welcome</Button>
        <PrimaryButton>Hello There!</PrimaryButton>
    )
}


Puoi anche modificare il tag di cui un componente con stile esegue il rendering utilizzando come prop.

Il as prop ti consente di specificare l’elemento HTML/JSX sottostante con cui il componente con stile eseguirà il rendering.

Per esempio:

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


const Button = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

function App() {
    return (
        <Button as='a' href='#'>Welcome</Button>
    )
}


Questo codice rende il componente Button come un elemento , impostando il suo attributo href su ‘#’.

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 una funzione createGlobalStyle 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, si importa la funzione createGlobalStyle e si dichiarano gli stili richiesti.

Per esempio:

import {createGlobalStyle} from 'styled-components';


const GlobalStyles = createGlobalStyle`
    @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

export default GlobalStyles;


Quindi importi il ​​componente GlobalStyles nel componente dell’app e ne esegui il rendering. Il rendering del componente GlobalStyles nel componente dell’app applicherà gli stili all’applicazione.

Così:

import React from 'react';
import GlobalStyles from './Global';


function App() {
    return (
        <div>
            <GlobalStyles />
        </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.