rsnext/examples/with-emotion
Shu Uesugi 6804039e94 Make example READMEs more consistent (#10124)
* npx create → npm init

* Fix inconsistent instructions

* Update amp-first

* Update with-graphql-react

* with-firebase-cloud-messaging

* Update with-higher-order-component

* change create-next-app url

* Update create-next-app instruction

* Update instructions to use npm instead of npx

* Move "the idea behind the example" to top

* Rename

* Rename

* Update contributing.md with a README template
2020-01-16 23:23:56 +01:00
..
pages fix typo (#5813) 2018-12-04 12:48:15 +01:00
.babelrc update with-emotion example to emotion 10 (#5770) 2018-11-29 20:12:25 +01:00
package.json Test updater script on examples folder (#5993) 2019-01-05 12:19:27 +01:00
README.md Make example READMEs more consistent (#10124) 2020-01-16 23:23:56 +01:00

Example app with emotion

This example features how to use emotion as the styling solution instead of styled-jsx.

We are creating three div elements with custom styles being shared across the elements. The styles includes the use of pseedo-selector and CSS animations.

This is based off the with-glamorous example.

Deploy your own

Deploy the example using ZEIT Now:

Deploy with ZEIT Now

How to use

Using create-next-app

Execute create-next-app with npm or Yarn to bootstrap the example:

npm init next-app --example with-emotion with-emotion-app
# or
yarn create next-app --example with-emotion with-emotion-app

Download manually

Download the example:

curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-emotion
cd with-emotion

Install it and run:

npm install
npm run dev
# or
yarn
yarn dev

Deploy it to the cloud with now (download):

now