Combine themes with createTheme

I have created a new themeable wrapper for my components but I would like to extend the Material-UI theme so I can have access to it's properties like palette and spacing

import injectSheet, { createTheming } from 'react-jss';

export const theming = createTheming('__EVENT_GIVES_THEME__');
export const { ThemeProvider: Themable } = theming;

export default (styles) => injectSheet(styles, { theming });

This is my current setup. All components are rendered within an app layout like so

<Provider store={store}>
  <MuiThemeProvider theme={theme}>
    <div>
      <Reboot />
      <AppRouter />
    </div>
  </MuiThemeProvider>
</Provider>

But I guess because of the new theme I created it's not inheriting any of this?

An example of how I'm using this if it helps understand is I have three files with each component, a wrapper that applies the theme and styles, a component file with the actual component and then a styles file where I put all my classes. Here is what one looks like

QuantityInput.styles.js

import { merge } from 'lodash';

const styles = theme => {
  return merge({
    quantityInput: {
      color: theme.palette.primary,
      fontWeight: '400',
      fontSize: '13px',
      display: 'inline-block',
      textAlign: 'center',
      top: '10px',
      float: 'left',
      width: '35px',
      position: 'relative'
    }
  }, theme);
};

export default styles;

**QuantityInput.jsx**

import React from 'react';
import QuantityInputComponent from './QuantityInput.component';

import { Themable } from '../Themable';

const QuantityInput = ({ theme, ...rest }) => (
  <Themable theme={theme || {}}>
    <QuantityInputComponent {...rest} />
  </Themable>
);

export default QuantityInput;

QuantityInput.component.jsx

import React from 'react';
import styles from "./QuantityInput.styles";
import IconButton from 'material-ui/IconButton';
import RemoveIcon from 'material-ui-icons/Remove';
import AddIcon from 'material-ui-icons/Add';

import themableWrapper from '../Themable';

const QuantityInputComponent = (props) => (
  <div className="quantity-selector">
    <IconButton aria-label="Remove">
      <RemoveIcon />
    </IconButton>
    <span className="quantity-wrap">
      <input name="quantity" type="number" className="quantity" />
    </span>
    <IconButton aria-label="Add">
      <AddIcon />
    </IconButton>
  </div>
);

export default themableWrapper(styles)(QuantityInputComponent);

cssinjs / theming

Combine themes with createTheme #49