Pular para o conteúdo principal
Lemonade

Estilos

O Lemonade usa CSS-in-JS para aplicar estilo aos seus componentes, de forma que todo CSS é incluído junto ao bundle JS e inserido no DOM em tempo de execução. Nós usamos o emotion, uma biblioteca de CSS-in-JS para isso.

Estilizando com a hook useStyles

A função useStyles é um React hook que pode ser usado para gerar estilos CSS e injetá-los aos seus componentes customizados. A hook retorna um objeto contendo:

  • classes: Um mapa contendo os nomes de classes gerados, para serem usados como a prop className de seus componentes
  • css: A função css do emotion usada para gerar as classes
  • theme: O tema atual do Lemonade

First paragraph

Second paragraph

import { Theme, useStyles } from '@lemonade/ui'
import React, { CSSProperties } from 'react'

function UseStylesDemo() {
  const { classes } = useStyles(createStyles)

  return (
    <div className={classes.container}>
      <p className={classes.first}>First paragraph</p>
      <p className={classes.second}>Second paragraph</p>
    </div>
  )
}

const createStyles = (theme: Theme) => ({
  container: {
    textAlign: 'center',

    '& > p': {
      fontSize: '1rem',
      lineHeight: 2,
    },
  } as CSSProperties,

  first: {
    color: theme.pallete.status.danger.main,
    '&:hover': {
      background: theme.pallete.surface.background,
    },
  } as CSSProperties,

  second: {
    background: theme.pallete.surface.background,
  } as CSSProperties,
})

export default UseStylesDemo

Usando a função css

Você também pode usar a função css para criar estilos CSS:

Hello
import { useStyles } from '@lemonade/ui'
import React from 'react'

function CssDemo() {
  const { css, theme } = useStyles()

  return (
    <span
      className={css({
        background: theme.pallete.primary.main,
        borderRadius: 6,
        padding: '0.25rem 1rem',
        color: theme.pallete.gray.c100,
        fontWeight: 'bold',
      })}
    >
      Hello
    </span>
  )
}

export default CssDemo