Transforme seu projeto React com os estilos certos

ESTILOS

No React, o CSS pode ser adicionado globalmente na aplicação através do arquivo index.css. Para estilizar componentes individualmente, pode-se usar o CSSModules, incluindo o CSS dentro do componente.

Style Components

Style Components é uma biblioteca de estilo para componentes React. Ele permite a você escrever estilos CSS diretamente dentro dos seus componentes, tornando mais fácil manter a coesão entre estilo e lógica de componentes. Ao invés de escrever estilos em arquivos CSS separados, você pode definir estilos diretamente em suas classes de componentes e aplicá-los aos elementos renderizados. Style Components oferece uma sintaxe semelhante ao CSS, bem como recursos adicionais como variáveis, herança de estilo e animações.

npm install styled-components
npm install -D @types/styled-components para Ts

importação styled components:
import styled from 'styled-components'

usando styled components:

const container = styled.div`
 color: red
`

<Container> Meu texto </Container>

Uma das maneiras de usar o Styled Components é criando um arquivo TypeScript com todos os estilos e importando-o em qualquer lugar que você deseja usá-los. Por exemplo:
import * as C from './AppStyles'.

podemos passar props para o styled
<Button small > Meu botão </Button>

export const Button = styled.button`
  /* ele verifica se o elemento tem a prop small  */
 font-size: ${(props)=> props.small ? '15px' : '30px' }
`

no TypeScript precisamos definir os tipos:

type ButtonProps = {
 bg: string
 small?: boolean
}

export const Button = styled.button<ButtonProps>`...`