reactjs - framework - No puedo usar componentes material-ui después de actualizar a [email protected]

material ui package json

Question

Recibí este mensaje en mi consola:

Tipos de contexto fallidos: el contexto requerido muiTheme no se especificó en AppBar

AppBar.js: 158 Uncaught TypeError: No se puede leer la propiedad ''prepareStyles'' de undefined

Acabo de tener una barra de aplicaciones en mi componente. Creo que debería funcionar pero ... aquí mi código muy simple:

import React from ''react'';
import {AppBar} from ''material-ui'';
export class MyComponent extends React.Component {
render() {
return (
<div>
<AppBar
title="Title"
/>
</div>
);
}
}

gracias por ayudar...

Answer 1

Con [email protected] se cambiaron algunas cosas.

Puede echar un vistazo en el enlace de abajo para más detalles. https://github.com/callemall/material-ui/blob/master/CHANGELOG.md

Por lo tanto con esos cambios tu código se convierte en:

 import React from ''react'';
import AppBar from ''material-ui/AppBar'';
import baseTheme from ''material-ui/styles/baseThemes/lightBaseTheme'';
import getMuiTheme from ''material-ui/styles/getMuiTheme'';
export class MyComponent extends React.Component {
getChildContext() {
return { muiTheme: getMuiTheme(baseTheme) };
}
render() {
return (
<div>
<AppBar
title="Title"
/>
</div>
);
}
}
MyComponent.childContextTypes = {
muiTheme: React.PropTypes.object.isRequired,
};

Answer 2

Importe MuiThemeProvider y luego ajuste el componente material-ui AppBar con MuiThemeProvider.

import React, { Component } from ''react'';
import AppBar from ''material-ui/AppBar'';
import MuiThemeProvider from ''material-ui/styles/MuiThemeProvider'';
import ''./App.css'';
class App extends Component {
render() {
return (
<MuiThemeProvider>
<div>
<AppBar title = "Title" />
</div>
</MuiThemeProvider>
);
}
}
export default App;

Answer 3

ahora en el 0.15.0 puede usar muiThemeProvider:

...
import getMuiTheme from ''material-ui/styles/getMuiTheme'';
import MuiThemeProvider from ''material-ui/styles/MuiThemeProvider'';
import MyAwesomeReactComponent from ''./MyAwesomeReactComponent'';
const App = () => (
<MuiThemeProvider muiTheme={getMuiTheme()}>
<MyAwesomeReactComponent />
</MuiThemeProvider>
)
...

Por lo tanto, no tiene que proporcionar contexto a los niños de forma manual. Más información en la documentation .