Build JSS with property relative to material-ui theme Toolbar height

toolbarRelativeStyles.js

/*

Since the release of material-ui 1.0.0-beta.11, there is a toolbar mixin available 
on the theme that provides the toolbar minHeight for each breakpoint. If you need to style 
an element relative to the standard height of the AppBar component, you can use this 
object to build your own styles.

In this gist, toolbarRelativeProperties returns an object that can be spread into your 
style object. It addresses the simple case of setting a specified attribute to a value 
that is based on the AppBar height.

example:

const useStyles = makeStyles(theme => ({
  beneathFixedToolbar: {
    ...toolbarRelativeProperties('top', theme),
  },
}));

*/

/**
 * toolbarRelativeStyles
 * Construct a style object that sets the specified property to a value based on material-ui toolbar height
 * @param {string} property Name of the property that will be given a value
 * @param {Object} Material-UI Theme
 * @param {function} modifier Function that accepts the toolbar height and returns the intended value
 * @returns {Object} JSS object
 */
const toolbarRelativeStyles = (property, theme, modifier = value => value) =>
  Object.keys(theme.mixins.toolbar).reduce((style, key) => {
    const value = theme.mixins.toolbar[key];
    if (key === 'minHeight') {
      return { ...style, [property]: modifier(value) };
    }
    if (value.minHeight !== undefined) {
      return { ...style, [key]: { [property]: modifier(value.minHeight) } };
    }
    return style;
  }, {});