material ui DropDownMenu 用不了. 用的webpack

Question

就是一打开网页下拉列表就打开了，怎么点都弄不消失。

控制台输出了几个 Warning: getInitialState was defined on xxxx(Paper, Menu, MenuItem之类的), a plain JavaScript class. This is only supported for classes created using React.createClass. Did you mean to define a state property instead?

每次点输入框都会抛出一个：
Uncaught TypeError: Cannot read property 'style' of null

app.js

'use strict';

import ReactDOM from 'react-dom';
import React from 'react';
import injectTapEventPlugin from 'react-tap-event-plugin';

import DropDownMenu from 'material-ui/lib/drop-down-menu'

// Needed for onTouchTap
injectTapEventPlugin();

let menuItems = [
    { payload: '1', text: 'Never' },
    { payload: '2', text: 'Every Night' },
    { payload: '3', text: 'Weeknights' },
    { payload: '4', text: 'Weekends' },
    { payload: '5', text: 'Weekly' }
];

ReactDOM.render(<DropDownMenu valueMember="payload" style={{width: "100%"}} menuItems={menuItems} />, document.getElementById('app'));

webpack.config.js

var webpack = require('webpack'),
    path = require('path'),
    node_modules = path.resolve(__dirname, 'node_modules'),
    pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');

module.exports = {
    entry: ['webpack/hot/dev-server', path.resolve(__dirname, 'app/app.js')],
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'app.bundle.js'
    },
    resolve: {
        extensions: ['', '.js', '.jsx'],
        alias: {
            'react/lib': path.resolve(node_modules, 'react/lib'),
            'react': pathToReact
        }
    },
    module: {
        loaders: [{
            test: /\.js|jsx$/,
            loaders: ['react-hot', 'babel'],
            exclude: /node_modules/
        }, {
            test: /\.css$/,
            loader: 'style!css'
        }],
        noParse: [pathToReact]
    },
    plugins: [new webpack.HotModuleReplacementPlugin()]
};

.babelrc

{
  "presets": ["es2015", "react"]
}

Answer 1

MUI不能直接render的，你需要给父级组件设置muiTheme给child context.
详见：http://www.material-ui.com/#/customization/themes

import {
Styles
} from 'material-ui'

const { ThemeManager, LightRawTheme } = Styles
const DefaultTheme = ThemeManager.getMuiTheme(LightRawTheme)
let muiTheme = ThemeManager.modifyRawThemePalette(DefaultTheme, palette)
export default class Base extends Component {
  static childContextTypes = {
    muiTheme: muitheme
  };

  static mixins = [StylePropable];

  getChildContext() {
    return {
      muiTheme: this.props.muiTheme
    }
  }
  render() {
    return <DropDownMenu/>
  }
}