javascript - themeoptions - theme direction material ui

TypeError: no se puede leer la propiedad ''prepareStyles'' de undefined

Question

Mi Component parece a

import React, {PropTypes} from ''react'';
import TransactionListRow from ''./TransactionListRow'';
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow} from ''material-ui/Table'';

const TransactionList = ({transactions}) => {
  return (
    <Table>
      <TableHeader displaySelectAll={false}>
        <TableRow>
          <TableHeaderColumn>Name</TableHeaderColumn>
          <TableHeaderColumn>Amount</TableHeaderColumn>
          <TableHeaderColumn>Transaction</TableHeaderColumn>
          <TableHeaderColumn>Category</TableHeaderColumn>
        </TableRow>
      </TableHeader>
      <TableBody>
        {transactions.map(transaction =>
          <TransactionListRow key={transaction.id} transaction={transaction}/>
        )}
      </TableBody>
    </Table>
  );
};

TransactionList.propTypes = {
  transactions: PropTypes.array.isRequired
};

export default TransactionList;

La prueba es

import {mount} from ''enzyme'';
import TransactionList from ''./TransactionList'';
import {TableHeaderColumn} from ''material-ui/Table'';
import getMuiTheme from ''material-ui/styles/getMuiTheme'';

describe("<TransactionList />", ()=> {
  it(''renders four <TableHeaderColumn /> components'', () => {
    const wrapper = mount(<TransactionList transactions={[]}/>);
    expect(wrapper.find(TableHeaderColumn)).to.have.length(4);
  });
});

Mis dependencias son

 "dependencies": {
    "babel-polyfill": "6.8.0",
    "bootstrap": "3.3.6",
    "jquery": "2.2.3",
    "react": "15.3.2",
    "react-dom": "15.3.2",
    "react-redux": "4.4.5",
    "react-router": "2.8.1",
    "react-router-redux": "4.0.6",
    "redux": "3.6.0",
    "redux-thunk": "2.1.0",
    "toastr": "2.1.2",
    "react-tap-event-plugin": "^1.0.0",
    "material-ui": "0.15.4"
  }

Cuando corro prueba veo

 1) <TransactionList /> renders four <TableHeaderColumn /> components:
     TypeError: Cannot read property ''prepareStyles'' of undefined
      at Table.render (node_modules/material-ui/Table/Table.js:155:48)
      at node_modules/react/lib/ReactCompositeComponent.js:793:21
      at measureLifeCyclePerf (node_modules/react/lib/ReactCompositeComponent.js:74:12)
      at ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (node_modules/react/lib/ReactCompositeComponent.js:792:27)
      at ReactCompositeComponentMixin._renderValidatedComponent (node_modules/react/lib/ReactCompositeComponent.js:819:34)
      at ReactCompositeComponentMixin.performInitialMount (node_modules/react/lib/ReactCompositeComponent.js:361:30)
      at ReactCompositeComponentMixin.mountComponent (node_modules/react/lib/ReactCompositeComponent.js:257:21)
      at Object.ReactReconciler.mountComponent (node_modules/react/lib/ReactReconciler.js:47:35)
      at ReactCompositeComponentMixin.performInitialMount (node_modules/react/lib/ReactCompositeComponent.js:370:34)
      at ReactCompositeComponentMixin.mountComponent (node_modules/react/lib/ReactCompositeComponent.js:257:21)
      at Object.ReactReconciler.mountComponent (node_modules/react/lib/ReactReconciler.js:47:35)
      at ReactCompositeComponentMixin.performInitialMount (node_modules/react/lib/ReactCompositeComponent.js:370:34)
      at ReactCompositeComponentMixin.mountComponent (node_modules/react/lib/ReactCompositeComponent.js:257:21)
      at Object.ReactReconciler.mountComponent (node_modules/react/lib/ReactReconciler.js:47:35)
      at ReactCompositeComponentMixin.performInitialMount (node_modules/react/lib/ReactCompositeComponent.js:370:34)
      at ReactCompositeComponentMixin.mountComponent (node_modules/react/lib/ReactCompositeComponent.js:257:21)
      at Object.ReactReconciler.mountComponent (node_modules/react/lib/ReactReconciler.js:47:35)
      at mountComponentIntoNode (node_modules/react/lib/ReactMount.js:105:32)
      at ReactReconcileTransaction.Mixin.perform (node_modules/react/lib/Transaction.js:138:20)
      at batchedMountComponentIntoNode (node_modules/react/lib/ReactMount.js:127:15)
      at ReactDefaultBatchingStrategyTransaction.Mixin.perform (node_modules/react/lib/Transaction.js:138:20)
      at Object.ReactDefaultBatchingStrategy.batchedUpdates (node_modules/react/lib/ReactDefaultBatchingStrategy.js:63:19)
      at Object.batchedUpdates (node_modules/react/lib/ReactUpdates.js:98:20)
      at Object.ReactMount._renderNewRootComponent (node_modules/react/lib/ReactMount.js:321:18)
      at Object.ReactMount._renderSubtreeIntoContainer (node_modules/react/lib/ReactMount.js:402:32)
      at Object.ReactMount.render (node_modules/react/lib/ReactMount.js:423:23)
      at Object.ReactTestUtils.renderIntoDocument (node_modules/react/lib/ReactTestUtils.js:84:21)
      at renderWithOptions (node_modules/enzyme/build/react-compat.js:175:26)
      at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:87:59)
      at mount (node_modules/enzyme/build/mount.js:21:10)
      at Context.<anonymous> (TransactionList.test.js:7:1)

Por favor, ayúdeme a entender qué está mal y cómo debo solucionarlo. Soy nuevo en React y su ecosistema.

Answer 1

Necesitas envolver tu mesa en una etiqueta MuiThemeProvider

me gusta:

import MuiThemeProvider from ''material-ui/styles/MuiThemeProvider''

const TransactionList = ({transactions}) => {
  return (
    <MuiThemeProvider>
      <Table>
...
      </Table>
    </MuiThemeProvider>
  );
};

Answer 2

Si seguimos las instrucciones en el orden presentado en el sitio web de Material UI, podemos encontrar la solución allí mismo, es decir, en la sección Uso. Han declarado el requisito previo de definir el tema como proveedor , antes de cualquier uso de componentes. Estos temas también pueden ser personalizados.

http://www.material-ui.com/#/get-started/usage

Claramente declarado con un fragmento de código -

import React from ''react'';
import ReactDOM from ''react-dom'';
import MuiThemeProvider from ''material-ui/styles/MuiThemeProvider'';
import MyAwesomeReactComponent from ''./MyAwesomeReactComponent'';

const App = () => (
  <MuiThemeProvider>
    <MyAwesomeReactComponent />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById(''app'')
);