motion-style v4.2.2

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 $bg="#fff">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',
    },
    bg: color => ({
      background: color,
      borderBottom: [2, 'solid', color]
    }),
  }
}

Themes

Use themes and themeProps to easily theme an entire component a different way. themeProps will accept boolean props.

@style class Title extends React.Component {
  render() {
    return (
      <base>
        <h1>Test</h1>
      </base>
    )
  }

  static themeProps = ['big']

  static style = {
    base: {
      padding: 10,
    },
    h1: {
      fontSize: 22,
    },
    theme: {
      big: {
        base: {
          padding: 20,
        },
        h1: {
          fontSize: 50,
        }
      },
      tint: color => ({
        base: {
          background: [color, 0.5],
        },
        h1: {
          color,
        },
      }),
    },
  }
}


// Use
React.render(<Title big tint="yellow" />, document.getElementById('app'))

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',
    },
  }
}