GitHub - emotion-js/emotion: style as a function of state
source link: https://github.com/emotion-js/emotion
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
emotion
The Next Generation of CSS-in-JS
Need support upgrading to Emotion 10? See the migration guide
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/core
/** @jsx jsx */ import { jsx } from '@emotion/core' let SomeComponent = props => { return ( <div css={{ color: 'hotpink' }} {...props} /> ) }
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
Examples
- emotion website [Demo Here]
- next-hnpwa-guide-kit [Demo Here]
- reactivesearch, a react UI library for Elasticsearch [Website]
- circuit-ui, a react component library built at SumUp [Storybook]
- govuk-react, a React component library built for UK Government departments
- open a PR and add yours!
Ecosystem
- stylelint - A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
- facepaint
- emotion-vue
- ember-emotion
- CSS to emotion transform
- ShevyJS
- design-system-utils - Utilities to give better access to your design system.
- polished - Lightweight set of Sass/Compass-style mixins/helpers for writing styles in JavaScript.
In the Wild
- healthline.com
- nytimes.com
- vault.crucible.gg
- saldotuc.com
- gatsbythemes.com
- blazity.com
- postmates.com
- thedisconnect.co
- zefenify.com
- sentry.io
- comparett.com
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]
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK