Skip to content
Lemonade

Styles

Lemonade uses CSS-in-JS to style its components, so all the CSS is bundled together with the JS file and attached to the DOM at execution time. We use emotion, a CSS-in-JS library, to acomplish that.

Styling with useStyles hook

The useStyles function is a React hook that can be used to generate CSS stylesheets and inject to custom components. It returns an object containing:

  • classes: A map containing the generated classes, to be used as className of your components
  • css: The emotion's css function which is used to generate the classes
  • theme: The current Lemonade theme

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

Using css function

You can also use the css function to create stylesheets:

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