0

Estou tentando usar um component personalizado, como o código abaixo, mas o mesmo está dando erro, alguém pode me dar uma luz do por que está acontecendo o erro?

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);

Esse erro está acontecendo e eu não estou entendendo

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
1
  • Por favor especifique a versao do Material UI.
    – nbkhope
    9/03/2018 às 17:48

1 Resposta 1

0

Importante: createStyleSheet() foi removido na versão 1.0.0-beta.5

O seu problema é que não estás chamando a função com os argumentos corretamente.

Olhando no código da versão 1.0.0-beta.4, segue o arquivo de teste pra função em questão, que afirma que a mesma leva os argumentos:

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

Então, tente adicionar o primeiro argumento, uma string com o nome da folha de estilos, como foi usado no arquivo de teste:

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

P.S. Você também pode tentar o seguinte:

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

A chamada acima fornece como segundo argumento uma função callback que retorna o objeto com os estilos definidos.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .