标签: material-ui

我在我的项目中使用React和MaterialUI.我想知道如何导入它

var RaisedButton = mui.RaisedButton,
    ThemeManager = new mui.Styles.ThemeManager();

到ES6

这就是我到目前为止的方式

import React from "react";
import { Link } from "react-router";
import ReactLogo from "elements/ReactLogo";
import mui from 'material-ui';

var RaisedButton = mui.RaisedButton, 
    ThemeManager = new mui.Styles.ThemeManager();

？

我目前正在为我的React + MaterialUi应用程序编写单元测试.

在我的应用程序中,我有一个Dialog.我想确保取决于按下对话框上的按钮:

<FlatButton
  label="Cancel"
  secondary={true}
  onTouchTap={this._cancelDialog.bind(this)} 
 />
 <FlatButton
   label="Submit"
   primary={true}
   onTouchTap={this._confirmDialog.bind(this)} 
 />

内部状态相应地改变.

不幸的是,我无法使用TestUtils.scryRenderedComponentsWithType(FlatButton)
或
scryRenderedComponentsWithTag("button")
等等来获取对话框内容 .

关于如何测试流量的任何想法？

更新1

所以,我可以通过调用TestUtils.scryRenderedComponentsWithType(对话)取得对话实例.但我无法得到对话框的内容.DOM明智的内容不会在视图内部呈现.它在文档级别(div)上的新创建节点中呈现.所以我试过这个:

let cancelButton = window.document.getElementsByTagName("button")[0];
Simulate.click(cancelButton);

上面的例子中的cancelButton是正确的DOM元素.但是,Simulate.click不会触发组件单击功能.

对乔纳斯说

我有一个简单的卡组件,我从material-ui的网站上复制过来.

我正在尝试在我的代码中实现它.当我点击CardHeader时,它不会扩展.

这是我的组件:

import React, { Component } from 'react';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

import {Card, CardActions, CardHeader, CardText} from 'material-ui/Card';
import FlatButton from 'material-ui/FlatButton';

const CardExample = () => (
    <MuiThemeProvider muiTheme={getMuiTheme()}>
        <Card expanded={true}>
            <CardHeader
              title="Without Avatar"
              subtitle="Subtitle"
              actAsExpander={true}
              showExpandableButton={true}
            />
            <CardText expandable={true}>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
              Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
              Aliquam dui mauris, mattis quis …

我有一个带有material-ui 的简单形式DatePicker，例如：

<DatePicker name="startDate" autoOk={true} floatingLabelText="startDate" onChange={(x, event) => {console.log(arguments);}} />

但是，如果更改日期，则会在控制台上打印一个空数组。对于如何解决此问题，我将不胜感激。

"material-ui": "0.15.0"
"react": "15.1.0"
"react-tap-event-plugin": "1.0.0"
"redux": "3.0.5"
"redux-form": "^6.0.0-alpha.4"

我在项目中使用Material-ui-next Select组件。

大多数样式都使用classesprop 覆盖。但selected即使使用，键也无法使用MuiThemeProvider。

这是代码的相关部分：

...

const theme = createMuiTheme({
  overrides: {
    MuiMenuItem: {
      selected: {
        backgroundColor: 'transparent',
      }
    }
  }
});

...

class SelectMUI extends Component {

  render() {

  const {className, name} = this.props

  return (
    <MuiThemeProvider theme={theme}>
      <Select
        classes={{root: 'muisc-root', icon: 'muisc-icon', select: 'muisc-select', selectMenu: 'muisc-select-menu'}}
        className={`mui-select-custom ${className}`}
        endAdornment={<Caret className='mui-select-caret'/>}
        MenuProps={{classes: {paper: 'muisc-menu-paper'}}}
        {...this.props}
      >
        {this.props.children}
      </Select>
  </MuiThemeProvider>
)

}}

因此，正如您所看到的，当我将MenuItems导入为道具时，我使用的MuiThemeProvider是在项目中注入样式。

这是所选项目中应用样式的屏幕截图：

如何重写此选择器，该选择器将来自同一元素的两个类组合在一起？

我开始使用材料ui标签,我遇到Tab标签的字体大小问题,因为它们真的很小......

这是我的代码:

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';

function TabContainer(props) {
  return (
    <Typography component="div" style={{ padding: 8 * 3 }}>
      {props.children}
    </Typography>
  );
}

TabContainer.propTypes = {
  children: PropTypes.node.isRequired,
};

const styles = theme => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper,
  },
  tabRoot: {
    backgroundColor: theme.palette.background.paper,
    flexGrow: 1,
    color: 'black',
    fontWeight: 'bold' …

我对将这个UI框架与React一起使用非常陌生。我被分配去开发一个应该具有更多设计模式的应用程序，我选择了一个也不依赖于Jquery代码的框架。但是，我正在努力定制预制组件。他们在他们的网站上有一个替代部分，但我不太了解。

我知道有两种自定义元素的方法

1. 您可以创建一个const styles = theme => { styles here }。然后，调用一个名为withStyles的高阶组件。那么定义的css属性将在classesprop 上可用。
2. 您还可以使用classes属性更改内部组件，例如：<Drawer classes={x}>。

第二个是我不清楚它是如何工作的。例如，它们具有一个组件。但是要为我更改背景非常复杂，我必须在自定义.css文件中手动进行更改。我不能使用className，甚至无法使用classes属性。

谁能更好地向我解释定制的完成方式？

我想用Drawer component在Material-UI React。我希望里面的状态Drawer component在关闭Drawer组件时不应该丢失，因此我传入variant="persistent"了Drawer组件。

现在的问题是，默认情况下，抽屉Persistent Drawer不提供抽屉，因此我无法在外部点击时将其关闭。我也尝试过，但仍然无法正常工作。backdrop functionalitytemporary{{ModalProps={{ onBackdropClick: this.toggleDrawer }} }}

有什么解决方法吗？

材质用户界面版本：1.0.0

谢谢

CodeSandbox链接

我正在尝试将圆角边框设置为我的圆角边框MaterialButton，要设置RoundedRectangleBorder形状属性的MaterialButton，问题是它没有效果。

码：

  Widget _showNeedHelpButton() {
    return new Padding(      
      padding: EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 0.0),
      child: new MaterialButton(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20.0))),
        elevation: 5.0,
        minWidth: 200.0,
        height: 35,
        color: Color(0xFF801E48),
        child: new Text('Preciso de ajuda',
            style: new TextStyle(fontSize: 16.0, color: Colors.white)),
        onPressed: () {
          setState(() {
            _isNeedHelp = true;
          });
        },
      ),
    );
  }

结果：

通过阅读material-ui文档和在线示例，似乎可以通过不同的方式导入同一项目：

import TextField from 'material-ui/TextField';
// or
import TextField from '@material-ui/core/TextField';
// or
import { TextField } from '@material-ui/core';

不同的导入方式之间有什么区别？