Usare gli styled-components in React

Gli styled-components in React sono dei componenti nei quali impostiamo direttamente il CSS, senza usare le classiche regole attraverso id o classi.

Ho fatto giusto qualche test al volo, ed in effetti sembrano comodi.

Sarebbe interessante creare una web app completa....

Comunque, per l'installazione possiamo usare npm:

npm install styled-components

Qui sotto qualche esempio:

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

function App() {

  const Main = styled.section`
    padding: 5em;
    background-color: rebeccapurple;
    max-width: 70%;
    margin: 0 auto;
  `;

  const Title = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: orangered;
  `;

  const Button = styled.button<{ $primary?: boolean; }>`
    background: ${props => props.$primary ? "blue" : "white"};
    color: ${props => props.$primary ? "white" : "blue"};
    font-size: 1em;
    margin: 1em;
    padding: 0.25em 1em;
    border: 2px solid red;
    border-radius: 3px;
  `;

  const ExtButton = styled(Button)`
    color: tomato;
    border-color: tomato;
  `;

  return (
      <>
        <Main>
          <Title>
            CIAO
          </Title>
          <Button>Normal</Button>
          <Button $primary>Primary</Button>
          <ExtButton>Ext button</ExtButton>
        </Main>
      </>
  );
}

export default App;

Come potete vedere possiamo anche passare dei parametri e creare regole in base a quelli.

Oppure estendere un componente e fare l'override solo di alcune regole.

Per altri concetti più avanzati potete vedere la doc!

Enjoy!