Custom style for React ui material

Question

I’m trying to use a custom Component, as the code below, but the same is giving error, someone can give me a light of why is the error happening?

import React from 'react';
import {withStyles, createStyleSheet} from 'material-ui/styles'
import PropTypes from 'prop-types';
import {Drawer} from 'material-ui';

const styleSheet = createStyleSheet({
  paper: {
    height: 'calc(100% - 64px)',
    top: 64
  }
})

class CustomDrawer extends React.Component {
 render () {
   const classes = this.props.classes
     return (
       <Drawer
        classes={{ paper: classes.paper}}
       />
      )
   }
 }

CustomDrawer.propTypes = {
 classes: PropTypes.object.isRequired
};

export default withStyles(styleSheet)(CustomDrawer);

This mistake is happening and I don’t understand

Typeerror: Object(...) is not a Function ./src/Components/Customdrawer/Customdrawer.jsx src/Components/Customdrawer/Customdrawer.jsx:

  3 | import PropTypes from 'prop-types';
  4 | import {Drawer} from 'material-ui';
  5 | 
> 6 | const styleSheet = createStyleSheet({
  7 |     paper: {
  8 |       height: 'calc(100% - 64px)',
  9 |       top: 64

Answer 1

Important: createStyleSheet() was removed in version 1.0.0-beta.5

Your problem is that you are not calling the function with the arguments correctly.

Looking at the version 1.0.0-beta.4 code, follows the test file for the function in question, who claims that it takes the arguments:

(name: string | GetStyles, callback?: GetStyles, options: Object = {})

Then, try to add the first argument, a string with the name of the stylesheet, as used in the test file:

createStyleSheet('nome', {
  paper: {
    height: 'calc(100% - 64px)',
    top: 64
  }
})

P.S. You can also try the following:

createStyleSheet('nome', (theme) => {
  return {
    paper: {
      /* ... */
    },
  },
})

The above call provides as the second argument a callback function that returns the object with the defined styles.