How to use the reactcss.Component function in reactcss

'use strict' /* @flow */

import React from 'react'
import ReactCSS from 'reactcss'
import merge from 'merge'
import isPlainObject from 'lodash.isplainobject'
import debounce from 'lodash.debounce'
import color from '../helpers/color'

import Slider from './slider/Slider'

class ColorPicker extends ReactCSS.Component {

  constructor(props: any) {
    super()

    this.state = merge(color.toState(props.color, 0), {
      visible: props.display,
    })

    this.debounce = debounce(function(fn: any, data: any) {
      fn(data)
    }, 100)

    this.handleChange = this.handleChange.bind(this)
    this.handleHide = this.handleHide.bind(this)
    this.handleAccept = this.handleAccept.bind(this)
    this.handleCancel = this.handleCancel.bind(this)

'use strict' /* @flow */

import React from 'react'
import ReactCSS from 'reactcss'
import merge from 'merge'
import isPlainObject from 'lodash.isplainobject'
import debounce from 'lodash.debounce'
import color from '../helpers/color'

import Material from './material/Material'

class ColorPicker extends ReactCSS.Component {

  constructor(props: any) {
    super()

    this.state = merge(color.toState(props.color, 0), {
      visible: props.display,
    })

    this.debounce = debounce(function(fn: any, data: any) {
      fn(data)
    }, 100)

    this.handleChange = this.handleChange.bind(this)
    this.handleHide = this.handleHide.bind(this)
    this.handleAccept = this.handleAccept.bind(this)
    this.handleCancel = this.handleCancel.bind(this)

/* jshint node: true, esnext: true */
"use strict";

var React = require('react');
var ReactCSS = require('reactcss');

class Raised extends ReactCSS.Component {

  classes() {
    return {
      'default': {
        wrap: {
          position: 'relative',
          width: '100%',
          height: '100%',
        },
        content: {
          position: 'relative',
          width: '100%',
          height: '100%',
        },
        bg: {
          Absolute: '0 0 0 0',

'use strict' /* @flow */

import React from 'react'
import ReactCSS from 'reactcss'
import merge from 'merge'
import isPlainObject from 'lodash.isplainobject'
import debounce from 'lodash.debounce'
import color from '../helpers/color'

import Compact from './compact/Compact'

class ColorPicker extends ReactCSS.Component {

  constructor(props: any) {
    super()

    this.state = merge(color.toState(props.color, 0), {
      visible: props.display,
    })

    this.debounce = debounce(function(fn: any, data: any) {
      fn(data)
    }, 100)

    this.handleChange = this.handleChange.bind(this)
    this.handleHide = this.handleHide.bind(this)
    this.handleAccept = this.handleAccept.bind(this)
    this.handleCancel = this.handleCancel.bind(this)

import React from 'react';
import ReactCSS from 'reactcss';
import {connect} from 'react-redux';
import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';

import * as drawerActions from "../actions/drawerActions";
import Navbar from './Navbar';
import Drawer from './Drawer';
import theme from '../theme';

class App extends ReactCSS.Component {
  constructor (props) {
    super(props);
  }

  getChildContext () {
    return {
      muiTheme: getMuiTheme(theme)
    };
  }

  componentWillMount () {
    // this.props.drawer.mql.addListener(this.props.updateAutoDock);
  }

  componentWillUnmount () {
    // this.props.drawer.mql.removeListener(this.props.updateAutoDock);

'use strict';

import React from 'react';
import ReactCSS from 'reactcss';

import { Container } from '../../../modules/react-basic-layout';

export default class Tweet extends ReactCSS.Component {

  classes() {
    return {
      'default': {
        tweet: {
          background: '#333',
        },
      },
    };
  }

  render() {
    return (
      <div is="">
        Tweet
      </div>

'use strict'

import React from 'react'
import ReactCSS from 'reactcss'

import { Container } from '../../../modules/react-basic-layout'
import { Raised } from '../../../modules/react-material-design'
import Schedule from '../../../examples/schedule/Schedule.jsx'

export default class Hero extends ReactCSS.Component {

  constructor() {
    super()

    this.handleMouseOver = this.handleMouseOver.bind(this)
    this.handleDrag = this.handleDrag.bind(this)
  }

  classes() {
    return {
      'default': {
        hero: {
          background: '#fafafa',
          paddingBottom: '80px',
        },
        headline: {

'use strict';

var React = require('react');
var ReactCSS = require('reactcss');
var markdown = require('../helpers/markdown');
var context = require('react-context');

var { Tile, Raised } = require('../../../react-material-design');

class Code extends ReactCSS.Component {

  constructor() {
    super();
  }

  classes() {
    return {
      'default': {
        shortCodeBlock: {
          display: 'inline-block',
        },
        shortCode: {
          padding: '14px 16px',
        },
        head: {
          borderRadius: '2px 2px 0 0',

'use strict'

import React from 'react'
import ReactCSS from 'reactcss'

import Box from './Box.jsx'

class Outside extends ReactCSS.Component {

  constructor() {
    super()

    this.handleClick = this.handleClick.bind(this)
  }

  classes() {
    return {
      'default': {
        outside: {
          width: '100%',
          transition: 'width 200ms linear',
        },
      },
    }

'use strict'

import React from 'react'
import ReactCSS from 'reactcss'

import { Container } from '../../../modules/react-basic-layout'
import Docs from '../../../modules/react-docs'

import documentation from '../../documentation'

export default class DocsText extends ReactCSS.Component {

  classes() {
    return {
      'default': {
        docs: {
          background: '#fafafa',
        },
        Documentation: {
          primaryColor: '#9013FE',
          sidebar: false,
        },
      },
    }
  }

  render() {