Emotion JS

by delvallejonatan

What is Emotion JS ?

Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching in production.

Why Emotion JS ?

Is builded on top of many other CSS-in-JS libraries like Styled Components and gather the best of them. It allows you to style apps quickly with string or object styles. Great performance with heavy caching in production. Big community behind it  

Who is using Emotion JS ?

Second Styling library in the React community

Comparison between Emotion and Aphrodite

Emotion JS community

Documentation

  1. Installation guide

  2. Use :

The CSS Prop

import { jsx } from '@emotion/core'

render(
  <div
    css={{
      backgroundColor: 'hotpink',
      '&:hover': {
        color: 'lightgreen'
      }
    }}
  >
    This has a hotpink background.
  </div>
)
import { css, jsx } from '@emotion/core'

const color = 'darkgreen'

render(
  <div
    css={css`
      background-color: hotpink;
      &:hover {
        color: ${color};
      }
    `}
  >
    This has a hotpink background.
  </div>
)

Styled Components

import styled from '@emotion/styled'

const Button = styled.button`
  color: turquoise;
`

render(<Button>This my button component.</Button>)
import styled from '@emotion/styled'

const Button = styled.button`
  color: ${props =>
    props.primary ? 'hotpink' : 'turquoise'};
`

const Container = styled.div(props => ({
  display: 'flex',
  flexDirection: props.column && 'column'
}))

render(
  <Container column>
    <Button>This is a regular button.</Button>
    <Button primary>
      This is a primary button.
    </Button>
  </Container>
)
import styled from '@emotion/styled'
const Basic = ({ className }) => (
  <div className={className}>
    Some text
  </div>
)

const Fancy = styled(Basic)`
  color: hotpink;
`

render(<Fancy />)
import styled from '@emotion/styled'

const Child = styled.div`
  color: red;
`

const Parent = styled.div`
  ${Child} {
    color: green;
  }
`
render(
  <div>
    <Parent>
      <Child>green</Child>
    </Parent>
    <Child>red</Child>
  </div>
)

Composition

 

import { css, jsx } from '@emotion/core'

const danger = css`
  color: red;
`

const base = css`
  background-color: darkgreen;
  color: turquoise;
`

render(
  <div>
    <div css={base}>This will be turquoise</div>
    <div css={[danger, base]}>
      This will be also be turquoise since the 
      base styles overwrite the danger styles.
    </div>
    <div css={[base, danger]}>This will be red
    </div>
  </div>
)
import { jsx, css } from '@emotion/core'

const base = css`
  color: hotpink;
`

render(
  <div
    css={css`
      ${base};
      background-color: #eee;
    `}
  >
    This is hotpink.
  </div>
)

Nested Selectors

 

import { jsx, css } from '@emotion/core'

const paragraph = css`
  color: turquoise;

  a {
    border-bottom: 1px solid currentColor;
    cursor:pointer;
  }
`
render(
  <p css={paragraph}>
    Some text. 
    <a>A link with a bottom border.
    </a>
  </p>
)
import { jsx, css } from '@emotion/core'

const paragraph = css`
  color: turquoise;

  header & {
    color: green;
  }
`
render(
  <div>
    <header>
      <p css={paragraph}>
        This is green since it's 
        inside a header
      </p>
    </header>
    <p css={paragraph}>
      This is turquoise since it's 
      not inside a header.
    </p>
  </div>
)

Media Queries and Keyframes

import { jsx, css } from '@emotion/core'

render(
  <p
    css={css`
      font-size: 30px;
      @media (min-width: 420px) {
        font-size: 50px;
      }
    `}
  >
    Some text!
  </p>
)
import { jsx, css, keyframes } from '@emotion/core'

const bounce = keyframes`
  from, 20%, 53%, 80%, to {
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    transform: translate3d(0, -30px, 0);
  }

  70% {
    transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0,-4px,0);
  }
`

render(
  <div
    css={css`
      animation: ${bounce} 1s ease infinite;
    `}
  >
    some bouncing text!
  </div>
)

Thank you

Made with Slides.com