StyleSheet Interface

In StyleSheet Interface multiple style rules are combined into as single "stylesheet".

See freestyler StyleSheet Interface API.

Using StyleSheet interface styles can be inject into the DOM lazily, i.e. only when they are used for the first time.

Other libraries that provide StyleSheet Interface

• aphrodite
• csjs

aphrodite Example

import {StyleSheet, css} from 'aphrodite';

const styles = StyleSheet.create({
  container: {
    border: '1px solid tomato',
  }
  button: {
    background: 'red',
    borderRadius: '5px',
    color: '#fff',
  }
});

class Button extends Component {
  render () {
    return (
      <div className={css(styles.container)}>
        <button className={css(styles.button)}/>
      </div>
    );
  }
}