JSPM – motion-style@3.2.0

Package Exports

motion-style

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (motion-style) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Motion Style

Higher order component for styling components. Uses Aphrodite to extract everything to stylesheets. Uses motion-nice-style to provide some nice helpers for styles.

Applies styles in the static style object to the render elements based on tags and $ props.

Example:

import styler from 'motion-style'

const style = styler({
  theme: true,
  themeKey: 'theme'
})

@style class extends React.Component {
  render() {
    return (
      <name>
        <h1 $black>Test</h1>
      </name>
    )
  }

  static style = {
    name: {
      flex: 1,
    },
    h1: {
      fontSize: 22,
      transform: {
        rotate: '45deg',
      },
      border: [1, 'solid', '#ccc'],
      color: [255, 255, 255],
    },
    black: {
      color: 'black',
    },
  }
}

Parent Styles

Helpful for maintaining a common set of styles for every component. Use $$ to access, to keep things explicit.

@style.parent({
  row: {
    flexFlow: 'row',
  },
})
@style
class extends React.Component {
  render() {
    return (
      <div $$row>
        <h1>Test1</h1>
        <h1>Test2</h1>
      </div>
    )
  }

  static style = {
    div: {
      background: 'yellow',
    },
  }
}