标签: material-ui

我正在发现ReactJS和material-ui(http://material-ui.com/).

我尝试为我的应用程序创建一个默认模板.我想在分离的组件中使用AppBar和LeftNav(在新版本的Drawer中重命名).

默认情况下,AppBar上有一个菜单按钮.我想用它来打开LeftNav,但我不知道如何调用我的LeftBarComponent组件函数来打开它.

我几乎了解如何在组件之间进行通信,但在我的情况下,我不知道如何做,因为没有关于它的文档.我知道打开LeftNav元素的唯一方法是使用LeftNav.toggle()

http://material-ui.com/#/components/left-nav

谢谢你的帮助.

Default.jsx

use strict';

var React = require('react');
var pageStore = require('../../stores/page');

var MainNavbar = require('../modules/navbar.jsx');
var LeftNavbar = require('../modules/leftbar.jsx');

var getState = function() {
  return {
    title: pageStore.get().title
  };
};

var DefaultComponent = React.createClass({
  mixins: [pageStore.mixin],
  componentDidMount: function() {
    pageStore.emitChange();
  },
  getInitialState: function() {
    return getState();
  },
  render: function() {
    return (
      /* jshint ignore:start */
      <div className="main-container">
        <MainNavbar />
        <LeftNavbar />
        <div className="content">
          {this.props.children}
        </div>
      </div>
      /* jshint ignore:end …

有没有人使用react.js和Material UI库构建网页？我应该如何调整图标大小？这是一个svg图标.我刚刚构建了一个"创建新"组件,它是一张材料纸,顶部有一个内容添加按钮.这是代码.

import React from 'react';
import Paper from 'material-ui/lib/paper';
import ContentAdd from 'material-ui/lib/svg-icons/content/add';
import IconButton from 'material-ui/lib/icon-button';


const styleForPaper = {
  width: '96vw',
  height: '20vh',
  margin: 20,
  textAlign: 'center',
  display: 'inline-block',
};

const styleForButton = {
  'marginTop': '7vh',
};


const PaperToAddNewWidgets = () => (
  <div>

    <Paper style={styleForPaper} zDepth={2}>

    <IconButton
        style={styleForButton}
        touch={true}
        tooltip="Add New Widget">

    <ContentAdd/>

    </IconButton>

    </Paper>
  </div>
);

export default PaperToAddNewWidgets;

看起来不错(确保以全尺寸查看),但图标太小.然后我打开了chrome dev工具,看到了以下的html代码.

<div style="background-color:#ffffff;transition:all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;box-sizing:border-box;font-family:Roboto, sans-serif;-webkit-tap-highlight-color:rgba(0,0,0,0);box-shadow:0 3px …

如何将焦点设置在material-ui TextField组件上？

componentDidMount() {
    ReactDom.findDomNode(this.refs.myControl).focus()
}

我试过上面的代码,但它不起作用:(

我目前正在以这种方式呈现主要组件:

 ReactDOM.render(
      <Provider store = {store}>
        {getRoutes(checkAuth)}
      </Provider>,
      document.getElementById('app')
    )

文档声明使用MuiThemeProvider来包装我的app组件.我是alrady使用Provider来包装,关于如何使用material-ui ina redux app的任何建议.我想在redux-form字段中添加material-ui,如下所示:

import React, { PropTypes } from 'react'
import {default as ReactModal} from 'react-modal'
import {Field, reduxForm} from 'redux-form'
import {TextField} from 'material-ui'

const customStyles = {
  overlay: {
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.55)'
  },
  content: {
    top: '50%',
    left: '50%',
    right: 'auto',
    bottom: 'auto',
    marginRight: '-50%',
    transform: 'translate(-50%, -50%)'
  }
}

const modalForm = (props) => …

有人可以帮我使用material-ui库在TextArea中创建TextField个性化吗？我没有找到任何应​​该将其个性化为TextArea的参数:https://github.com/callemall/material-ui/blob/v1-beta/src/TextField/TextField.d.ts

这是TextArea:https://material.io/guidelines/components/text-fields.html#text-fields-field-types(CMD/Ctrl + F'文本区域').

文本区域高于文本字段,并将溢出文本换行到新行.当光标到达字段底部时,它们会垂直滚动.

提前致谢,

我想创建一个ExpansionPanel其中摘要可能是一长串完整字符（即没有连字符，没有空格）的地方。

当我尝试它时， ExpansionPanelSummary组件在窄宽度显示器上显示效果不佳 - 它会覆盖按钮并溢出屏幕外。

这是我的示例，从ExpansionPanel Material-UI 演示中分叉出来，缩小输出帧的宽度，您可以看到电子邮件地址没有换行并且看起来很丑：https : //codesandbox.io/s/wqm5k3vmyw

我已经尝试使用nowrap上Typography得到它夹（我的首选解决方案）：

<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
  <Typography nowrap className={classes.heading}>
    areallyreallylongaddress@email.example.com
  </Typography>
</ExpansionPanelSummary>

我也试过添加样式 overflowWrap: "break-word"来强制它在任何地方换行，而不仅仅是在连字符或空格上。

我能做的最好的事情是通过添加style={{ textOverflow: "ellipsis", overflow: "hidden" }}到ExpansionPanel（参见链接示例中的第二个示例）。

理想情况下，我希望它通过从上下文右侧截断、显示省略号而不是覆盖展开图标来发挥作用。
我怎样才能做到这一点ExpansionPanel？

否则，我怎么能强制它自动换行？

我使用的是 material-UI v3.4.0，问题在 Chrome 和 Firefox 上可见。

这是直接来自 MUI 菜单 - 自定义菜单的代码。我不想放置我的代码，因为有一些内置函数使其更加混乱。

在我的代码（不是这个）中，单击菜单项时我会打开一个 MUI 对话框。问题是提交对话框后菜单不会消失。

我想知道如何在单击菜单上的任何内容（菜单项）后立即关闭菜单。

谢谢

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Menu, { MenuProps } from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import DraftsIcon from '@material-ui/icons/Drafts';
import SendIcon from '@material-ui/icons/Send';

const StyledMenu = withStyles({
  paper: {
    border: '1px solid #d3d4d5',
  },
})((props: MenuProps) => (
  <Menu
    elevation={0}
    getContentAnchorEl={null}
    anchorOrigin={{
      vertical: 'bottom',
      horizontal: 'center',
    }}
    transformOrigin={{ …

我想将 Material UICircularProgress组件显示为几乎填满未知大小的父 div 所需的大小。比方说，尺寸应该是0.8 * min(parent_height, parent_width)。我尝试过愚弄max-width什么的，但没有成功。

我可以使用一些useDimension钩子来测量父母的尺寸，但我认为这是最后的手段。一定有一个纯 CSS 解决方案，对吗？

我有以下代码：

export function MyTextField({ onChange, defaultValue }) {
  return (
    <TextField
      defaultValue={defaultValue}
      onChange={(event) => {
        if (onChange) {
          onChange(event.target.value);
        } else {
          console.log("*no onChange function added*", event.target.value);
        }
      }}
    />
  );
}

//then I use MyTextField in another component

const [recommendations, setRecommendations] = useState(
   (appointment.recommendations) || ""
)
console.log(recommendations) // logs as expected with every onChange

<MyTextField
   defaultValue={recommendations}
   onChange={setRecommendations}
/>

发生 10 次或更多“onChange”后，我在控制台上收到此错误：

Material-UI: Too many re-renders. The layout is unstable.
TextareaAutosize limits the number of renders to prevent an …

我正在尝试使用 material-ui/lab 日期选择器，但是出现此错误！我已经使用更新了我的 material-ui 版本npm install @material-ui/core@latest并且它运行良好。但是，我失去了使用createMuiTheme&的能力MuiThemeProvider。