How to use the aphrodite.StyleSheet function in aphrodite

const StyleSheet = require("aphrodite").StyleSheet;

const button = StyleSheet.create({
    buttonStyle: {
        backgroundColor: 'white',
        border: '1px solid #ccc',
        borderLeft: '0',
        cursor: 'pointer',
        margin: '0',
        padding: '5px 10px',
        position: 'relative', // for hover

        ':first-child': {
            borderLeft: '1px solid #ccc',
            borderTopLeftRadius: '3px',
            borderBottomLeftRadius: '3px',
        },

KAdefine("javascript/server-package/test-component.jsx", function(require, module, exports) {
var React = require("react");var _require = 
require("aphrodite");var StyleSheet = _require.StyleSheet;var css = _require.css;

var TestComponent = React.createClass({ displayName: "TestComponent", 
    render: function () {
        return React.createElement("div", null, 
        this.props.val, 
        React.createElement("ol", { className: css(styles.red) }, 
        this.props.list.map(function (val) {return React.createElement("li", { key: val }, val);})));} });





var styles = StyleSheet.create({ 
    red: { 
        color: "red" } });

}(_react2.default.Component);

ManifestComponent.propTypes = {
  computedStates: _react.PropTypes.array,
  actionsById: _react.PropTypes.object,
  stagedActionIds: _react.PropTypes.array,
  skippedActionIds: _react.PropTypes.array,
  dispatch: _react.PropTypes.func
};

ManifestComponent.update = function () {};

exports.default = ManifestComponent;


var styles = _aphrodite.StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'nowrap',
    borderBottom: '1px solid #ddd'
  },
  actions: {
    margin: '10px'
  }
});

function ImgsViewer(props) {
    _classCallCheck(this, ImgsViewer);

    var _this = _possibleConstructorReturn(this, (ImgsViewer.__proto__ || Object.getPrototypeOf(ImgsViewer)).call(this, props));

    _this.theme = (0, _util.deepMerge)(_theme2.default, _this.props.theme);
    _this.classes = _aphrodite.StyleSheet.create((0, _util.deepMerge)(defaultStyles, _this.props.theme));
    _this.state = { imgLoaded: false };

    _util.bindFunctions.call(_this, ['gotoNext', 'gotoPrev', 'closeBackdrop', 'handleKeyboardInput', 'handleImgLoaded']);
    return _this;
  }

function Lightbox(props) {
		_classCallCheck(this, Lightbox);

		var _this = _possibleConstructorReturn(this, (Lightbox.__proto__ || Object.getPrototypeOf(Lightbox)).call(this, props));

		_this.theme = (0, _deepMerge2.default)(_theme2.default, props.theme);
		_this.classes = _aphrodite.StyleSheet.create((0, _deepMerge2.default)(defaultStyles, _this.theme));
		_this.state = { imageLoaded: false };

		_bindFunctions2.default.call(_this, ['gotoNext', 'gotoPrev', 'closeBackdrop', 'handleKeyboardInput', 'handleImageLoaded']);
		return _this;
	}

var _aphrodite = require('aphrodite');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var ManifestButton = function ManifestButton(_ref) {
  var label = _ref.label;
  var action = _ref.action;
  return _react2.default.createElement(
    'div',
    { className: (0, _aphrodite.css)(styles.button), onClick: action },
    label
  );
};

var styles = _aphrodite.StyleSheet.create({
  button: {
    flex: '1 0 auto',
    cursor: 'pointer',
    color: 'black',
    display: 'inline-block',
    padding: '10px 0',
    textAlign: 'center',
    ':hover': {
      backgroundColor: '#eee'
    }
  }
});

ManifestButton.propTypes = {
  label: _react.PropTypes.string,
  action: _react.PropTypes.func

let {css} = aphrodite.StyleSheetServer.renderStatic(() => {
    let aphroditeStyles = aphrodite.StyleSheet.create(sheet);
    for (let i = 0; i < len; i++) {
      let className = aphrodite.css(aphroditeStyles[keys[i]]);
      if (i === 0) {
        first = className;
      } else if (keys[i] === 'c1000') {
        middle = className;
      } else if (i === len - 1) {
        last = className;
      }
    }
  });

*              {body}
 *          

 *          <div>
 *              {footer}
 *          </div>
 *      
 */

const aphrodite = require("aphrodite");
const React = require("react");
const createReactClass = require("create-react-class");
const PropTypes = require("prop-types");

const css = aphrodite.css;
const StyleSheet = aphrodite.StyleSheet;

const styles = StyleSheet.create({
    modalStyle: {
        position: "fixed",
        width: "500px",
        margin: "0 0 0 -250px",
        top: "60px",
        left: "50%",
        backgroundColor: "white",
        border: "1px solid rgba(0, 0, 0, 0.3)",
        borderRadius: "6px",
        zIndex: 1050,
    },

    modalBackdropStyle: {
        opacity: 0.7,

}]);

  return ManifestActionComponent;
}(_react2.default.Component);

ManifestActionComponent.propTypes = {
  diff: _react.PropTypes.array,
  toggleAction: _react.PropTypes.func,
  index: _react.PropTypes.number,
  action: _react.PropTypes.object,
  skipped: _react.PropTypes.bool,
  expanded: _react.PropTypes.bool
};


var styles = _aphrodite.StyleSheet.create({
  container: {
    marginBottom: '10px',
    border: '1px solid #ddd',
    background: '#eee'
  },

  header: {
    padding: 10
  },

  bottomBordered: {
    borderBottom: '1px solid #ddd'
  },

  toggle: {
    padding: '0 5px',

aphrodite.StyleSheetServer.renderStatic(_ => {
      const sheet = aphrodite.StyleSheet.create({
        a: {
          width: 'calc(100%)',
          height: ['min-content', 'calc(50%)'],
          boxSizing: 'border-box',
        },
      });
      aphrodite.css(sheet.a);
    });
  })