<aside> 💡 Você pode escolher qualquer uma dessas bibliotecas de estilo com base nas suas necessidades e preferências de design. Cada uma delas oferece um conjunto robusto de componentes e estilos para acelerar o desenvolvimento da sua aplicação. Escolha a que melhor se adapta ao seu projeto e comece a estilizar seus componentes de maneira eficiente e eficaz.

</aside>

1. Styled Components

Styled Components permite que você escreva estilos CSS em JavaScript e os associe diretamente aos seus componentes React.

Documentação: Styled Components

Instalação:

npm install styled-components @types/styled-components

Uso:

import styled from 'styled-components';

const Button = styled.button`
  background: palevioletred;
  color: white;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

const App: React.FC = () => {
    return (
        <div className="App">
            <Button>Styled Button</Button>
        </div>
    );
};

export default App;

2. Material-UI (MUI)

Material-UI (MUI) é uma biblioteca de componentes React que implementa o design system do Material Design do Google.

Documentação: Material-UI

Instalação:

npm install @mui/material @emotion/react @emotion/styled

Uso:

import React from 'react';
import Button from '@mui/material/Button';

const App: React.FC = () => {
    return (
        <div className="App">
            <Button variant="contained" color="primary">
                MUI Button
            </Button>
        </div>
    );
};

export default App;

3. Bootstrap

Bootstrap é uma das bibliotecas de CSS mais populares, oferecendo uma vasta gama de componentes prontos para uso.

Documentação: Bootstrap

Instalação: