Custom style for React

Question

Custom style for React

Navigation

#1 by (0 votes)

0

I'm trying to use a custom component, like the code below, but the same is giving error, can anyone give me a light of why the error is 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 error is happening and I'm not understanding

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

react syntax-error drawer-layout

asked by anonymous 28.02.2018 / 16:29

1 answer

How to use the transition effect on a display? How do I insert elements of a first vector into another second vector, in a given position given by the user? and also print the step by step

score 0 · Accepted Answer

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 code 1.0.0-beta.4 , follows the test file for the function in question , which states that it takes the arguments:

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

Then try adding the first argument, a string with the name of the style sheet, 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 a second argument a callback function that returns the object with the defined styles.