I'm adding in Material UI to a small React app but I believe the tutorial I am going through is outdated and they are utilizing an older version of Material UI. I keep getting _materialUi2.default.Styles.ThemeManager is not a constructor in the web console as well as Missing class properties transform.
The docs for Material UI aren't so great, and I'm not sure if there's a better resource to look at their latest documentation.
I believe the problem is with ThemeManager.setPalette(). Any advice?
import React from 'react';
import mui from 'material-ui';
import MessageList from './MessageList.jsx';
// Material UI
import ThemeManager from 'material-ui/lib/styles/theme-manager';
import Colors from 'material-ui/lib/styles/colors';
import AppBar from 'material-ui/lib/app-bar';
import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';
class App extends React.Component {
constructor() {
super();
ThemeManager.setPalette({
primary1Color: Colors.blue500,
primary2Color: Colors.blue700,
primary3Color: Colors.blue100,
accent1Color: Colors.pink400
});
}
static childContextTypes = {
muitheme: React.PropTypes.object
}
getChildContext() {
return {
muiTheme: ThemeManager.getMuiTheme()
}
}
render() {
return (
<div>
<AppBar title="Chat App"/>
<MessageList />
</div>
);
}
}
export default App;
You're right the tutorial is outdated. Import it like this:
import ThemeManager from 'material-ui/lib/styles/theme-manager';
Also: the key passed through context must be called "muiTheme"
Check out number 1 on this page of the docs: http://www.material-ui.com/#/customization/themes
Yes the tutorial is outdated.
Instead of doing this:
ThemeManager.setPalette({
primary1Color: Colors.blue500,
primary2Color: Colors.blue700,
primary3Color: Colors.blue100,
accent1Color: Colors.pink400
});
You can define your theme in a seperate folder like Theme.jsx
import Colors from 'material-ui/lib/styles/colors';
export default {
palette: {
primary1Color: Colors.blue500,
primary2Color: Colors.blue700,
primary3Color: Colors.blue100,
accent1Color: Colors.pink400
}
};
Then in your main App.jsx, import Theme.jsx and set it to getMuiTheme(MyTheme)
import React, {Component} from 'react';
import MessageList from './MessageList.jsx';
import ThemeManager from 'material-ui/lib/styles/theme-manager';
import AppBar from 'material-ui/lib/app-bar';
import MyTheme from './Theme.jsx';
export default class App extends Component {
constructor(){
super();
}
static childContextTypes = {
muiTheme: React.PropTypes.object
}
getChildContext(){
return {
muiTheme: ThemeManager.getMuiTheme(MyTheme)
};
}
render(){
return(
<div>
<AppBar title="Chat App"/>
<MessageList />
</div>
);
}
}
This should solve the problem
Related
Sorry, I am new in React.js, just switched from Java and I can't understand how I shall show my map on UI. Just give me a hint
import React from "react";
import {Map, GoogleApiWrapper} from 'google-maps-react';
class TestMap extends Component {
render() {
return (
<div className="GoogleMap">
<Map google={this.props.google} zoom={14} />
</div>
);
}
}
GoogleApiWrapper({
apiKey: ({api-key})
})(TestMap);
export {TestMap, GoogleApiWrapper};
here:
import React, { Component } from 'react';
import {TestMap} from '../components/map/google/TestMap';
class Map extends Component {
render() {
return (
//???
);
}
}
export default Map;
It's a react component, render it as JSX
import React, { Component } from 'react';
import { TestMap } from '../components/map/google/TestMap';
class Map extends Component {
render() {
return (
<TestMap />
);
}
}
export default Map;
An aside, don't name your class component Map as there is already a Javascript Map object and this could be the cause for some major confusion and bugs.
EDIT
Your map is forever loading as you've exported the undecorated TestMap, i.e. it isn't decorated with the google api and props.
import React, { Component } from "react";
import {Map, GoogleApiWrapper} from 'google-maps-react';
class TestMap extends Component {
render() {
return (
<div className="GoogleMap">
<Map google={this.props.google} zoom={14} />
</div>
);
}
}
// default export the decorated component so the api-key and google prop is processed and injected.
export default GoogleApiWrapper({
apiKey: 'sLiGhTlyReDacTedApIkEy'
})(TestMap);
You need to return your component as JSX markup, Introducing JSX.
Also if you are new to react is suggest starting here, Getting Started.
import React, { Component } from 'react';
import {TestMap} from '../components/map/google/TestMap';
class Map extends Component {
render() {
return (
<TestMap />
);
}
}
Specify the component inside the return block.In your case <TestMap /> inside the return of Map component.
Firstly I am not able to understand why are you adding one more abstraction of component over your Map component. You can directly use the TestMap component you have used in the first code snippet.
Anyway, You can directly return from the Map Component.
import React, { Component } from 'react';
import {TestMap} from '../components/map/google/TestMap';
class Map extends Component {
render() {
return (
<TestMap />
);
}
}
export default Map;
Child Component
import React from "react";
import {Map, GoogleApiWrapper} from 'google-maps-react';
class TestMap extends Component {
render() {
return (
<div className="GoogleMap">
<Map google={this.props.google} zoom={14} />
</div>
);
}
}
GoogleApiWrapper({
apiKey: ({api-key})
})(TestMap);
export default TestMap;
Parent Component
import React, { Component } from 'react';
import {TestMap} from '../components/map/google/TestMap';
class Map extends Component {
render() {
return (
<TestMap />
);
}
}
export default Map;
I just start looking for changing theme globally, and found Context can do that,
but I've a problem to implement the example code to my react native project,
I've tried this code:
//themeContext.js
const themes = {
light: {
foreground: '#000000',
background: '#eeeeee',
},
dark: {
foreground: '#ffffff',
background: '#222222',
},
};
export const ThemeContext = React.createContext({
theme: themes.dark,
toggleTheme: () => {},
})
//App.js
import React, { Component } from 'react';
import {InitialScreen} from './routes/routes';
import { ThemeContext } from './Component/themeContext';
export default class App extends Component {
constructor(props) {
super(props);
this.state={
theme:themes.light,
toggleTheme:this.toggleTheme
}
this.toggleTheme=()=>{
this.setState(state=>({
theme:state.theme === themes.dark ? themes.light : themes.dark
}))
}
}
render() {
console.disableYellowBox = true;
return (
<ThemeContext.Provider value={this.state}>
//this is Login.js
<InitialScreen/>
</ThemeContext.Provider>
);
}
}
//Login.js
import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { ThemeContext } from '../Component/themeContext';
export default class Login extends Component {
render() {
return (
<ThemeContext.Consumer>
{({theme, toggleTheme})=>{
<View style={{backgroundColor:theme.background}}>
<Text>{this.state}</Text>
</View>
}}
</ThemeContext.Consumer>
);
}
}
but i have an error Can't find variable: Component, i don't know where should i put import React from 'react'; cause i think I've add Component var in app.js and login.js
any help would be appreciate
Replace next string in the top of your Login.js instead of
import React from 'react';
with
import React, { Component } from 'react';
Another way is to replace
export default class Login extends Component {
}
with
export default class Login extends React.Component {
}
In App.js updated your App component class defintion by replacing Component with React.Component as shown:
export default class App extends React.Component {
/* existing component code */
}
Make the same change in Login.js as well:
export default class Login extends React.Component {
/* existing component code */
}
These changes will cause the Login and App components to extend from the Component class as defined on the React object exported from 'react'.
Your problem in themeContext.js file
you use createContext() but you don't import React so you will get can't find React
it's should be like this
import React from 'react';
export const themes = {
light: {
foreground: '#000000',
background: '#eeeeee',
},
dark: {
foreground: '#ffffff',
background: '#222222',
},
};
export const ThemeContext = React.createContext({
theme: themes.dark,
toggleTheme: () => {},
});
And in Login.js
import React,{Component} from 'react';
i just started a reactJS project and when i decided to use material-ui it statrted throwing a lot of errors like this one:
bundle.js:12441 Warning: Failed Context Types: Calling PropTypes validators directly is not supported by the prop-types package. Use PropTypes.checkPropTypes() to call them. Read more at fb.me/use-check-prop-types Check the render method of CardHeader.
my App component looks like this:
import React from 'react';
import PropTypes from 'prop-types';
import NavBar from './common/NavBar';
import Logo from './common/Logo';
import MuiThemeProvider from 'material-ui/styles/MuithemeProvider';
class App extends React.Component {
render() {
return (
<MuiThemeProvider>
<div className="container-fluid">
<Logo />
<NavBar />
{this.props.children}
</div>
</MuiThemeProvider>
);
}
}
App.PropTypes = {
children: PropTypes.object.isRequired
};
export default App;
material-ui version: 0.20.0
react version: 15.0.2
Try:
App.propTypes = {
children: PropTypes.object.isRequired
};
Im studying React-Redux, Material-UI.
Now, Im trying to create Sample App, but not work.
I dont know how to improve my code.
I want to open Drawer , when Material-UI AppBar onLeftIconButtonTouchTap is clicked.
I cant bind my Action to Component, I think.
When following code is running, not fire onLeftIconButtonTouchTap event.
And when I change openDrawer to openDrawer(), JS error 'openDrawer is not a function' is found on Chrome Dev tool.
Header.jsx as a Component
import React, { PropTypes } from 'react';
import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer';
const Header = ({
openDrawer,
open
}) => (
<div>
<AppBar
title='sample'
onLeftIconButtonTouchTap = {() => openDrawer}
/>
<Drawer
docked={false}
open={open}
/>
</div>
)
Header.PropTypes = {
openDrawer: PropTypes.func.isRequired,
open: PropTypes.bool.isRequired
}
export default Header;
HeaderContainer.jsx as a Container
import React from 'react';
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux';
import { header } from '../actions'
import Header from '../components/Header';
const mapStateToProps = (state) => ({open});
const mapDispatchToProps = (dispatch) => (
{openDrawer: bindActionCreators(header, dispatch)}
);
const HeaderContainer = connect(
mapStateToProps,
mapDispatchToProps
)(Header);
export default HeaderContainer;
App.jsx as a RootComponent
import React, { Component, PropTypes } from 'react';
import Header from '../components/Header';
import injectTapEventPlugin from "react-tap-event-plugin";
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
injectTapEventPlugin();
class App extends Component {
constructor(props) {
super(props);
}
getChildContext() {
return { muiTheme: getMuiTheme(baseTheme) };
}
render() {
return (
<div>
<Header />
{this.props.children}
</div>
);
}
};
App.childContextTypes = {
muiTheme: React.PropTypes.object.isRequired,
};
export default App;
Thanks in advance.
You are not binding the function correctly. You need to update your code to
<AppBar
title='sample'
onLeftIconButtonTouchTap = { openDrawer.bind(this) }
/>
More about .bind() method here: Use of the JavaScript 'bind' method
I am building a small chat app with React and Flux via a tutorial, however the tutorial seems to be out of date as it is using a method from Alt (used with Flux) that throws the following error:
Cannot resolve module 'alt/utils/connectToStores'
...which I believe is coming from the line with #connectToStores. Below is my code. I looked into this issue and it seems like Alt was broken up into smaller packages, one of them being Alt-React (which is stumping me completely). My question is, how can I use this method in an up-to-date manner?
import React from 'react';
import mui from 'material-ui';
import MessageList from './MessageList.jsx';
import MessageBox from './MessageBox.jsx';
import Login from './Login.jsx';
import ChannelList from './ChannelList.jsx';
import connectToStores from 'alt/utils/connectToStores';
import ChatStore from '../stores/ChatStore';
// Material UI
import * as Colors from 'material-ui/lib/styles/colors';
import AppBar from 'material-ui/lib/app-bar';
import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';
#connectToStores // es7 decorator with deprecated 'connectToStores'
class App extends React.Component {
constructor() {
super();
}
static getStores() {
return [ChatStore];
}
static getPropsFromStores() {
return ChatStore.getState();
}
static childContextTypes = {
muiTheme: React.PropTypes.object
}
getChildContext() {
return {
muiTheme: getMuiTheme({
primary1Color: Colors.blue500,
primary2Color: Colors.blue700,
primary3Color: Colors.blue100,
accent1Color: Colors.pink400
})
};
}
render() {
var view = <Login />;
if (this.props.user) {
view = (
<div>
<div id="content-container">
<ChannelList />
<MessageList />
</div>
<MessageBox />
</div>
);
}
return (
<div>
<AppBar title="Chat App"/>
{{view}}
</div>
);
}
}
export default App;
The Alt Utils libraries have all been moved into a separate package at https://github.com/altjs/utils
Once installed
npm i --save-dev alt-utils
You can access the same libraries as the tutorial requires using:
import connectToStores from 'alt-utils/lib/connectToStores';
import {decorate, bind, datasource} from 'alt-utils/lib/decorators';