标签: material-ui

React v 15.4.0今天早上发布,似乎包含了一个修改了react-tap-event-plugin v1.0.0的更改产生了这个错误:

$ npm build
> myProject@0.1.47 build /.../myProject
> node scripts/build.js
Creating an optimized production build...
Failed to create a production build. Reason:
Module not found: Error: Cannot resolve module 'react/lib/EventPluginHub' in /.../myProject/node_modules/react-tap-event-plugin/src

(注意:我稍微清理了输出)

根据THIS react-tap-event问题日志版本2.0.0的react-tap-event修复了构建问题.但是,material-ui仍然使用react-tap-event 1.0.0版.这里有什么选择？我能想到的唯一选择是:

• 降级反应和其他包,如上面的链接所述
• 等待Material-UI升级到react-tap-event 2.0.0

还有其他解决方案吗？据我所知,如果我想使用反应15.4.0,我几乎死在水中.

我一直在努力实现这个简单的事情.我试图<TreeMenu/>用伪选择器在材料UI v1中显示/隐藏我的组件但不知何故它不起作用.这是代码:CSS:

      root: {
        backgroundColor: 'white',
        '&:hover': {
          backgroundColor: '#99f',
        },
      },

  hoverEle: {
    visibility: 'hidden',
    '&:hover': {
      visibility: 'inherit',
    },
  },
      rootListItem: {
        backgroundColor: 'white',
        display: 'none',
        '&:hover': {
          display: 'block',
          backgroundColor: '#99f',
        },
      },
      '@global': {
        'li > div.nth-of-type(1)': {
          display: 'block !important',
          backgroundColor: "'yellow',",
        },
      },

root css类在列表上工作正常但是rootListItem甚至@global li选择器都不起作用.我不确定我在选择器上做错了什么.我读了材料-ui文档并说V1支持伪选择器.

JSX:

<div>
      {props.treeNode.map(node => (
        <ListItem
          key={`${node.Type}|${node.NodeID}`}
          id={`${node.Type}|${node.NodeID}`}
          className={(classes.nested, classes.root)}
          button
          divider
          disableGutters={false}
          dense
          onClick={() => props.onNodeClick(node.Type, node.NodeID, node.NodeName)}
          title={props.adminUser ? node.NodeID : ''}
          onMouseOver={() => …

我希望我的抽屉组件在 AppBar 组件下打开，而不是覆盖它。但是对于这个新版本的@Material-Ui/core，这从来没有发生过。

知道我该怎么做吗？

目前，它以一种涵盖 AppBar 的方式打开。这不是我想要的，我希望抽屉在 appBar 组件下打开，就像任何普通应用程序一样。

这是我的代码：

const styles = theme => ({


root: {
    flexGrow: 1,
  },
  flex: {
    flex: 1,
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20,
  },
  list: {
      width: 250,
  },

});


class ClippedDrawer extends React.Component {
  constructor(props){
    super(props);
    this.state={
     open: false,     
    }
  }

  toggleDrawer(){
    this.setState({
      open: !this.state.open,
    });
  };

  render(){
    const { classes } = this.props;
    return(
        <div className={classes.root}>
          <AppBar position="relative" className={classes.appBar}>
            <Toolbar>
              <IconButton className={classes.menuButton} onClick={()=>this.toggleDrawer()} color="inherit" aria-label="Menu">
                <MenuIcon />
              </IconButton>
              <Typography …

我正在尝试在Formik中使用DatePicker.但是,当我单击DatePicker的日期时,其表单值不会更改.相反,我收到了这个错误:

未捕获的TypeError:e.persist不是Formik._this.handleChange中的函数(formik.es6.js:5960)

我缩短了代码,代码如下

const SomeComponent = () => (
    <Formik
        render={({
            values,
            handleSubmit,
            handleChange,
            setFieldValue
        }) => {
            return (
                <div>
                    <form onSubmit={handleSubmit}>
                        <DatePicker
                            name={'joinedAt'}
                            value={values['joinedAt']}
                            onChange={handleChange}
                        />
                    </form>
                </div>
            )
        }}
    />
)

我用Google搜索了一些文档,https://github.com/jaredpalmer/formik/issues/187和https://github.com/jaredpalmer/formik/issues/86

所以我尝试过如下,但它不起作用.

 ...setFieldValue

 <DatePicker
   name={'joinedAt'}
   value={values['joinedAt']}
   onChange={setFieldValue}
 />

有没有办法自定义BottomNavigationBar高度？

我目前有一个BottomNavigationBar带有标签的标签可以点击/滑动导航，但是默认高度（即使在减少文本和图标之后）太高了。

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    backgroundColor: Colors.blue,
    title: Text( 'RefLog', style: Styles.headerLarge ),
    actions: <Widget>[
      new IconButton(
        icon: Icon(Icons.list),
        onPressed: () {},
      )
    ],
  ),
  body: DefaultTabController(
    length: 3,
    child: Scaffold(
      body: TabBarView(
        children: _children,
      ),
      bottomNavigationBar: TabBar(
        tabs: [
          Tab( text: 'One', icon: Icon(Icons.import_contacts, size: 20.0) ),
          Tab( text: 'Two', icon: Icon(Icons.restaurant, size: 20.0) ),
          Tab( text: 'Three', icon: Icon(Icons.record_voice_over, size: 20.0) ),
        ],
        labelStyle: TextStyle(fontSize: 12.0),
        labelColor: Colors.white, …

我有以下输入字段，我希望它只接受正整数，而不提供插入字符的可能性- + , .。

<TextField
  fullWidth
  type="number"
  placeholder={'[1-100]'}
  id="simple-start-adornmhent"
  onChange={this.handleChangeField('amount')}
  InputProps={{ inputProps: { min: 1 } }}
/>

你能给我一些建议吗？

默认情况下，材料UI主题是几个预先定义的对象，例如的组合typography: {...}，palette: {...}等等。

是否可以将自定义对象添加到此设置中并仍然使用createMuiTheme？

例如，主题对象将变为：

const theme = {
  palette: {
    primary: '#000'
  },
  typography: {
    body1: {
      fontFamily: 'Comic Sans'
    }
  },
  custom: {
    myOwnComponent: {
      margin: '10px 10px'
    }
  }
}

有人可以用外行的术语向我解释 FormControl 提供什么功能，以及为什么/如何使用它？

我在 React 中使用 Material-UI，我看到的许多表单示例都使用了 FormControl，但我很难理解它的作用，以及我的项目是否有必要。

现在我只有一个名为 Form.js 的组件，我将所有表单元素包含在一个 div 中，如下所示：

return (
<div>
  <FormControl className={classes.formControl}>
    <InputLabel htmlFor="select-multiple-accounts">Account</InputLabel>
    <Select
      multiple
      value={accountName}
      onChange={handleAccountChange}
      input={<Input id="select-multiple-accounts" />}
      renderValue={
        selected => (
        <div className={classes.chips}>
          {
            selected.map(value => (
            <Chip key={value} label={value} className={classes.chip} />
          ))}
        </div>
      )}
      MenuProps={MenuProps}
    >
      {accountNames.map(name => (
        <MenuItem key={name.label} value={name.label} style={getStyles(name.label, accountName, theme)}>
          {name.label}
        </MenuItem>
      ))}
    </Select>
  </FormControl>
  <br /><br />
  <TextField
    id="job-number"
    label="Job #"
    className={classes.textField}
    value={props.jobNumber}
    onChange={handleJobNumberChange}
    fullWidth
  />
  <br /><br /><br />
  <TextField
    id="project-description"
    label="Project …

我有一个使用 Formik 库创建事件的表单。我需要检查开始日期是否与结束日期重叠，反之亦然。我有两个日期选择器可以选择日期和时间。我如何使用 Yup 来验证这一点并在它们重叠时显示错误消息？

我在这里先向您的帮助表示感谢

const validationSchema = Yup.object().shape({
    eventName: Yup.string()
        .min(1, "Must have a character")
        .max(10, "Must be shorter than 255")
        .required("Must enter an event name"),

    email: Yup.string()
        .email("Must be a valid email address")
        .max(255, "Must be shorter than 255")
        .required("Must enter an email"),

    eventStartDate: Yup.date()
        .required("Must enter start date"),


    eventEndDate: Yup.date()
        .required("Must enter end date")


})

var defaultValue = new Date().toDateString


export default function EventForm(){

    return (
        <Formik 
        initialValues={{eventName: "", email: "", }}
        validationSchema={validationSchema}
        onSubmit={(values, {setSubmitting, resetForm}) …

我有一个材料用户界面TextField，它在焦点上打开一个Popper. 我正在尝试使用 react-testing-library 测试这种行为。

组件：

import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import Grow from '@material-ui/core/Grow';
import Paper from '@material-ui/core/Paper';
import Popper from '@material-ui/core/Popper';
import TextField from '@material-ui/core/TextField';
import React from 'react';
import { ItemType } from './types';

export type TextFieldDropDownProps = {
    items: ItemType,
};

export function TextFieldDropDown(props: TextFieldDropDownProps) {
    const [searchTerm, setSearchTerm] = React.useState('');
    const [anchorEl, setAnchorEl] = React.useState(null);

    const handleSearchTermChange = (event: any) => {
        setSearchTerm(event.target.value);
    };

    const onFoucs = (event: any) => {
        setAnchorEl(event.currentTarget); …