xsurge83 / emotion

style as a function of state

Home Page:https://emotion.sh/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

emotion

emotion

The Next Generation of CSS-in-JS

Backers on Open Collective Sponsors on Open Collective npm version Build Status codecov core gzip size core size react gzip size react size slack spectrum

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.

πŸ‘€ Demo Sandbox

πŸ“– Docs

Frequently viewed docs:

Quick Start

Get up and running with a single import.

npm install --save emotion
import { css } from 'emotion'

const app = document.getElementById('root')
const myStyle = css`
  color: rebeccapurple;
`
app.classList.add(myStyle)

React with Optional Babel Plugin

npm install --save emotion react-emotion babel-plugin-emotion

Note: use preact-emotion in place of react-emotion if using Preact

import styled, { css } from 'react-emotion'

const Container = styled('div')`
  background: #333;
`
const myStyle = css`
  color: rebeccapurple;
`
const app = () => (
  <Container>
    <p className={myStyle}>Hello World</p>
  </Container>
)

Do I Need To Use the Babel Plugin?

The babel plugin is not required, but enables some optimizations and customizations that could be beneficial for your project.

Look here πŸ‘‰ emotion babel plugin feature table and documentation

Demo Sandbox

Demo Code Sandbox

Examples

Ecosystem

In the Wild

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! πŸ™ [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

About

style as a function of state

https://emotion.sh/

License:MIT License


Languages

Language:JavaScript 96.1%Language:TypeScript 3.8%Language:HTML 0.1%Language:CSS 0.0%