# emotion **Repository Path**: mm19209219_admin/emotion ## Basic Information - **Project Name**: emotion - **Description**: CSS-in-JS library designed for high performance style composition - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2019-11-21 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README
The Next Generation of CSS-in-JS
> **Need support upgrading to Emotion 10? [See the migration guide](https://emotion.sh/docs/migrating-to-emotion-10)** [](#backers) [](#sponsors) [](https://badge.fury.io/js/emotion) [](https://circleci.com/gh/emotion-js/emotion) [](https://codecov.io/gh/emotion-js/emotion)     [](https://emotion-slack.now.sh/) [](https://spectrum.chat/emotion) 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](https://codesandbox.io/s/pk1qjqpw67) # [📖 Docs](https://emotion.sh/docs/introduction) Frequently viewed docs: - [Introduction](https://emotion.sh/docs/introduction) - [Install](https://emotion.sh/docs/install) - [CSS Prop](https://emotion.sh/docs/css-prop) - [Styled Components](https://emotion.sh/docs/styled) - [Composition](https://emotion.sh/docs/composition) - [Nested Selectors](https://emotion.sh/docs/nested) - [Media Queries](https://emotion.sh/docs/media-queries) ### Quick Start Get up and running with a single import. ```bash npm install --save @emotion/core ``` ```jsx /** @jsx jsx */ import { jsx } from '@emotion/core' let SomeComponent = props => { return ( ) } ``` ### 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](https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin-emotion)_ ### Demo Sandbox [Demo Code Sandbox](https://codesandbox.io/s/pk1qjqpw67) ### Examples - [emotion website](site) [[Demo Here](https://emotion.sh)] - [next-hnpwa-guide-kit](https://github.com/tkh44/next-hnpwa-guide-kit) [[Demo Here](https://hnpwa.life)] - [reactivesearch](https://github.com/appbaseio/reactivesearch), a react UI library for Elasticsearch [[Website](https://opensource.appbase.io/reactivesearch/)] - [circuit-ui](https://github.com/sumup/circuit-ui), a react component library built at SumUp [[Storybook](https://sumup.github.io/circuit-ui/)] - **open a PR and add yours!** ### Ecosystem - [stylelint](https://github.com/stylelint/stylelint) - A mighty, modern linter that helps you avoid errors and enforce conventions in your styles. - [facepaint](https://github.com/emotion-js/facepaint) - [emotion-vue](https://github.com/egoist/emotion-vue) - [nuxt-community/emotion-module](https://github.com/nuxt-community/emotion-module) - Emotion module for Nuxt.js - [ember-emotion](https://github.com/alexlafroscia/ember-emotion) - [CSS to emotion transform](https://transform.now.sh/css-to-emotion/) - [ShevyJS](https://github.com/kyleshevlin/shevyjs) - [design-system-utils](https://github.com/mrmartineau/design-system-utils) - Utilities to give better access to your design system. - [polished](https://github.com/styled-components/polished) - Lightweight set of Sass/Compass-style mixins/helpers for writing styles in JavaScript. - [monad-ui](https://github.com/muhajirdev/monad-ui/) - Utility First CSS-In-JS - [css-in-js-media](https://github.com/zx6658/css-in-js-media) - you can deal with responsive design using css-in-js easily with this `css-in-js-media` which is similar with include-media ### In the Wild - [abacusfi.com](https://abacusfi.com) - [healthline.com](https://www.healthline.com) - [nytimes.com](https://www.nytimes.com) - [vault.crucible.gg](http://vault.crucible.gg/) - [render.com](https://render.com) - [gatsbythemes.com](https://gatsbythemes.com/) - [blazity.com](https://blazity.com/) - [postmates.com](https://postmates.com/) - [thedisconnect.co](https://thedisconnect.co/one) - [zefenify.com](https://zefenify.com/about.html) - [sentry.io](https://sentry.io) - [comparett.com](https://comparett.com) ## Contributors This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].