❤
npm
Sign UpSign In

preact-emotion
TypeScript icon, indicating that this package has built-in type declarations

9.2.12 • Public • Published

preact-emotion

The styled API for emotion and preact

preact-emotion exports styled which allows you to use emotion to create Preact components that have styles attached to them, it also exports all of emotion's exports.

For more documentation on styled, read about it and try it out in the styled docs

npm install --save emotion preact-emotion
// @live
import styled, { css } from 'preact-emotion'
const SomeComponent = styled('div')`
  display: flex;
  background-color: ${props => props.color};
`
 
const AnotherComponent = styled('h1')(
  {
    color: 'hotpink'
  },
  props => ({ flex: props.flex })
)
 
render(
  <SomeComponent color="#DA70D6">
    <AnotherComponent flex={1}>Some text.</AnotherComponent>
  </SomeComponent>
)

/preact-emotion/

    Package Sidebar

    Install

    npm i preact-emotion

    Repository

    github.com/emotion-js/emotion/tree/master/packages/preact-emotion

    Homepage

    emotion.sh

    Weekly Downloads

    92

    Version

    9.2.12

    License

    MIT

    Unpacked Size

    107 kB

    Total Files

    14

    Last publish

    Collaborators

    • tkh44
    • emmatown
    Try on RunKit
    Report malware