标签: material-ui

我想在Material-UI AppBar中有多个FlatButton组件并保留样式,所以它看起来像这样(带有多个按钮).

但是,当我尝试添加多个FlatButton组件时,我得到一个错误,说我需要将它们包装在一个封闭的标签中.我使用了span和div都有相同的不良结果.

有没有办法在封闭标签中保留AppBar的样式,或者以不同的方式将多个元素添加到AppBar本身以获得所需的效果？

我已经在Github上找到了这些部分实现作为主要的竞争者,尽管他们还有很长的路要走:

• 反应天然材料,试剂盒
• 反应天然材料设计

他们目前缺乏一些我想要使用的组件.是否有一种我缺少的替代解决方案？

我正在使用由此命令安装的材料ui版本1.:

npm install -S material-ui@next

每次我想使用时,页面中都会出现不需要的水平滚动.例如,这是一个简单的代码:

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles, createStyleSheet } from 'material-ui/styles';
import Paper from 'material-ui/Paper';
import Grid from 'material-ui/Grid';


/* project imports */
import NavMenu from './Page-Parts/NavMenu';
import LoginPanel from './Login-Parts/LoginPanel';

const styleSheet = createStyleSheet('FullWidthGrid', theme => ({
  root: {
    flexGrow: 1,
    marginTop: 0,
  },
  paper: {
    padding: 16,
    textAlign: 'center',
    color: theme.palette.text.secondary,
    marginTop: "3rem"
  },
}));

function Login(props){
    const classes = props.classes;
    return (
    <div className={classes.root}>
      <Grid container gutter={24} …

在框外单击时我的框会关闭，这使我丢失了所有输入。我希望我的框仅在单击取消按钮时关闭。我不确定是什么让它在外面点击时关闭。有什么帮助吗？

我正在使用@material-ui/core

  _close() {
        DeviceCreationActions.close();
    }

render() {
        const actions = [
            <Button
                id="device-create-dialog-close"
                key="device-create-dialog-close"
                onClick={this._close}
            >
              {this.context.intl.formatMessage({id: 'Cancel'})}
            </Button>
        ];

        if (0 < this.state.stepIndex) {
            actions.push(<Button
                id="device-create-dialog-back"
                key="device-create-dialog-back"
                onClick={this._previousStep.bind(this)}
              >
                {this.context.intl.formatMessage({id: 'Back'})}
              </Button>
            );
        }

        if (
            (1 >= this.state.stepIndex && 0 < this.state['formStep' + this.state.stepIndex].length) ||
            (0 < this.state.stepIndex)
        ) {
            actions.push(<Button
                id="device-create-dialog-next"
                key="device-create-dialog-next"
                onClick={2 === this.state.stepIndex ? this._save.bind(this) : this._nextStep.bind(this)}
              >
                {this.context.intl.formatMessage({id: 2 === this.state.stepIndex ? 'Create' : 'Next'})}
              </Button>
            );
        }

每个都有不同的用例吗？什么时候应该使用 withStyles 而不是 makeStyles？

我正在研究 Materialui，在这里我试图显示日期和时间，但它显示了一个错误

在上下文中找不到实用程序。您要么 a) 忘记将组件树包装在 MuiPickersUtilsProvider 中；或 b) 混合命名和直接文件导入。建议：使用来自模块索引的命名导入。

请告诉我如何解决这个错误

这是 App.js

import React, { Fragment, useState } from "react";
import { DateTimePicker } from "@material-ui/pickers";

function BasicDateTimePicker() {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <Fragment>
      <DateTimePicker
        label="DateTimePicker"
        inputVariant="outlined"
        value={selectedDate}
        onChange={handleDateChange}
      />

      <DateTimePicker
        autoOk
        ampm={false}
        disableFuture
        value={selectedDate}
        onChange={handleDateChange}
        label="24h clock"
      />

      <DateTimePicker
        value={selectedDate}
        disablePast
        onChange={handleDateChange}
        label="With Today Button"
        showTodayButton
      />
    </Fragment>
  );
}

export default BasicDateTimePicker;

我正在使用React Material UI，但出现此错误：找不到模块：无法解析“@date-io/date-fns”。

这是我在 package.json 文件中的依赖项：

"dependencies": {
    "@date-io/date-fns": "^2.0.0",
    "@material-ui/core": "^4.9.5",
    "@material-ui/pickers": "^3.2.10",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.19.2",
    "date-fns": "^2.0.0",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-facebook-login": "^4.1.1",
    "react-google-login": "^5.1.14",
    "react-google-maps": "^9.4.5",
    "react-hook-form": "^5.2.0",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0"
  },

我尝试安装最新版本的 date-io/date-fns，然后尝试了 2.0.0 版和 1.0.0 版，但仍然出现相同的错误。

使用 DataGrid 时，我无法弄清楚如何使行高可变，以便行高动态地基于单元格中文本内容的长度。

我想我需要renderCell在列上添加较长的文本，并使用该<Typography>组件，但我不知道使用什么参数来设置这种样式。

有很多关于如何处理截断、省略等的文档，但我似乎无法弄清楚我需要根据内容申请可变行高。

如何设置 MUI 的占位符文本DatePicker。删除输入字段中的文本时显示的文本。我想将文本设置为"tt.mm.jjjj"，但总是出现以下错误消息：

Format string contains an unescaped latin alphabet character `j`

沙盒

<DatePicker
  inputFormat="tt.mm.jjjj"
    label="Basic example"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField placeholder="tt.mm.jjjj" {...params} />}
  />

我想禁用弹出所有选项的按钮，例如：排序、过滤、隐藏等。

我知道您可以删除列中的排序选项sortable: false，如果我想删除其他所有内容，那么我可以简单地使用这两个选项disableColumnFilter来删除过滤器并 disableColumnSelector删除几乎所有其他内容但是，即使我删除所有选项，按钮也是如此仍然存在，我想将其删除。