标签: material-ui

我在我的项目中使用react和material-ui,我遇到了一个我不知道如何解决的简单问题.我想创建一个抽屉并设置它的高度,当它打开时,它不会打开应用程序栏.

Drawer组件中没有高度参数,我也尝试覆盖它的样式并在样式对象上设置高度,如下所示:

<Drawer style={{height:'90%'}} />

但它没有用.

我能想到的唯一方法是编辑抽屉组件的代码,但当然我想避免这种情况.

关于如何定义高度的任何想法？

我想在nv install中使用svg-icons文件夹中的material-ui图标,但每个js文件中每个图标的实现都有不同的导入,就像动作或编辑器中的那些一样.我不得不看通过js文件找到如何导入每个图标.我想要一个文档或网站,专门让我复制粘贴每个图标的导入,这将有很大帮助,在此先感谢:)

我正在寻找**navigate next**谷歌设计的图标并找到它

import ImageNavigateNext from 'material-ui/svg-icons/image/navigate-next';

什么是MobileTearSheet,它在哪里？

我在React项目中使用Material UI Next.我有卡组件,里面有图像(卡片介质)和文本(卡片文本).我的文字下方还有一个按钮.我的问题是..如何使整张卡片可点击？即.无论用户是否按下卡片文本,卡片图像或按钮,都应触发我在按钮上调用的onClick事件.

有没有办法自定义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); …