我有一个使用5. 我希望该间距不会发生在xs断点处。如何在xs断点处删除它？

你可以在这里看到一个演示：https : //stackblitz.com/edit/hfkmxi?file=demo.js

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    height: 140,
    width: 100,
  },
}));

export default function SpacingGrid() {
  const classes = useStyles();

  return (
    <Grid container justify="center" spacing={5}>
      <Grid item>
        <Paper className={classes.paper} />
      </Grid>
      <Grid item>
        <Paper className={classes.paper} />
      </Grid>
      <Grid item>
        <Paper className={classes.paper} …

我正在使用 Material UI v4，我正在从单个文件导出我的样式，但这些样式在其他组件中不起作用。styles.js

const useStyles = makeStyles(theme => ({
    root: {
      display: 'flex',
    },
    // textField component styles
    textFieldInput: {
      margin: theme.spacing(2),
      width: 250,
      minWidth: 250,
    },
    formControl: {
      margin: theme.spacing(2),
      minWidth: 120,
    },


})
export {useStyles}

在我的组件文件中

    ....
    const classes = useStyles(styles);

    return (
        <TextField
            className={classes.textFieldInput}
            label={label}
            placeholder={label}
            error={touched && invalid}
            helperText={touched && error}
            {...input}
            disabled={disabled || false}
            readOnly={readOnly || false}
            required={required || false}
            InputProps={{ readOnly, ...custom }}
            {...custom}
        />
    );
     ....

当我在我的组件中使用它时，样式将在第一次热重载时起作用，但之后样式不会有任何影响，为什么？以及我如何解决这个问题

我正在将材料表（https://material-table.com/#/）用于反应项目，并且我已经导入了我需要使用的图标，但是在操作栏中，操作显示为纯文本，并且不是作为材料图标。

import React, { forwardRef } from 'react';
import MaterialTable from 'material-table';

import AddBox from '@material-ui/icons/AddBox';
import ArrowUpward from '@material-ui/icons/ArrowUpward';
import Check from '@material-ui/icons/Check';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import Clear from '@material-ui/icons/Clear';
import DeleteOutline from '@material-ui/icons/DeleteOutline';
import Edit from '@material-ui/icons/Edit';
import FilterList from '@material-ui/icons/FilterList';
import FirstPage from '@material-ui/icons/FirstPage';
import LastPage from '@material-ui/icons/LastPage';
import Print from '@material-ui/icons/Print';
import Remove from '@material-ui/icons/Remove';
import SaveAlt from '@material-ui/icons/SaveAlt';
import Search from '@material-ui/icons/Search';
import ViewColumn from '@material-ui/icons/ViewColumn';

const Table …

在我的 React 应用程序中，我有一个可以从下拉列表中获取值的输入。为此，我使用 material-ui Autocomplete 和 TextField 组件。

问题：如何通过单击按钮而不从下​​拉列表中选择以编程方式设置输入值？例如，我想从示例中设置“教父”，并且应该在输入中直观地看到该值。

Codesandbox 示例在这里

import React from "react";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { TextField, Button } from "@material-ui/core";

export default function ComboBox() {
  const handleClick = () => {
    // set value in TextField from dropdown list
  };

  return (
    <React.Fragment>
      <Autocomplete
        options={top100Films}
        getOptionLabel={option => option.title}
        style={{ width: 300 }}
        renderInput={params => (
          <TextField
            {...params}
            label="Combo box"
            variant="outlined"
            fullWidth
          />
        )}
      />
      <Button onClick={handleClick}>Set value</Button>
    </React.Fragment>
  );
}

// Top 100 …

滚动或选择项目时，多选框弹出框不断跳跃

Codepen https://codesandbox.io/s/material-demo-e5j8h

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Input from "@material-ui/core/Input";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import ListItemText from "@material-ui/core/ListItemText";
import Select from "@material-ui/core/Select";
import Checkbox from "@material-ui/core/Checkbox";

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
    maxWidth: 300
  },
  chips: {
    display: "flex",
    flexWrap: "wrap"
  },
  chip: {
    margin: 2
  },
  noLabel: {
    marginTop: theme.spacing(3)
  }
}));

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP …

我对材料 ui 中的不同表单组件感到困惑。

有六个组件与不包含特定输入字段的表单相关：
- FormControl
- FormLabel
- FormControlLabel
- FormGroup
- InputLabel
- FormHelperText

当您查看他们的示例Signin和Signup 时，会在顶部添加一个纯 html 表单标签。

有人能解释一下什么时候使用什么组件来正确构建表单吗？

我在构建我的 react-app 时遇到了大问题。

我在正常的 react-scripts start dev-server 上使用 material-ui/core v.4.10.2 一切正常。

但是当通过 Nginx 或 npm-module serve 构建和提供服务时，渲染无法正常工作......

（我在material-ui Github上看到了类似的问题，但是都被（错误地）关闭了

这是我的 package.json 以防我的依赖项有问题（我当然不认为是这种情况）

{
  "name": "web_app",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.10.2",
    "@material-ui/styles": "4.10.0",
    "@material-ui/icons": "^4.2.1",
    "@material-ui/lab": "^4.0.0-alpha.45",
    "rc-color-picker": "^1.2.6",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-infinite-scroll-hook": "^2.0.1",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.1.1",
    "tinycolor2": "^1.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not …

我正在使用 构建一个应用程序Material-UI，到目前为止一切顺利。我正在尝试使用一个Accordion组件构建一个组件，但在尝试导入它时出现错误：

Module not found: Can't resolve '@material-ui/core/Accordion' in [path]

我试图通过默认导入和命名导入来导入它，但结果是一样的。

组件：

import React from 'react';
//  import {
//     Accordion,
//     AccordionSummary,
//     AccordionDetails
//  } from '@material-ui/core';
import Accordion from '@material-ui/core/Accordion';
import AccordionSummary from '@material-ui/core/AccordionSummary';
import AccordionDetails from '@material-ui/core/AccordionDetails';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';


const JobCard = () => {

    return(
        <Accordion expanded={true}>
            <AccordionSummary
                expandIcon={<ExpandMoreIcon />}
            >
                test
            </AccordionSummary>
            <AccordionDetails>
                test
            </AccordionDetails>
        </Accordion>
    );
}

export default JobCard;

我的所有其他组件都可以与导入的 Material-UI 组件一起正常工作。

我在这里错过了什么我做错了吗？有没有人遇到过这样的问题？

我正在尝试使用Container带有样式组件的组件，ContainerProps但是我无法传递component属于OverridableComponent接口的prop 。下面的代码给了我错误，告诉我我不能传递component财产。当我改变<Container/>到<MuiContainer/>它的工作原理。

MuiContainer有类型，OverridableComponent<ContainerTypeMap<{}, 'div'>>但我无法OverridableComponent从中导入@material-ui/core

我怎样才能使传递component财产成为可能？

import { Container as MuiContainer, ContainerProps } from '@material-ui/core';
import React from 'react';
import styled from 'styled-components';

const Container = styled(MuiContainer)<ContainerProps>``;

export const Test = () => {
  return (
    <>
      <Container maxWidth="lg" component="main">
        content
      </Container>
    </>
  );
};

我正在使用 Material-UI 选择器库构建 DatePicker React 并使用 Luxon 作为适配器。当我更改日历日期时，我得到一个带有 DateTime 的对象，如下所示：

我正在使用的 DatePicker 代码：

<MuiPickersUtilsProvider utils={LuxonUtils}>
              <DatePicker
                className={classes.input}
                disableToolbar
                variant="inline"
                label="Date"
                format="cccc, LLLL dd"
                helperText=""
                value={date}
                margin="normal"
                onChange={newDate => {
                  handleDateOnChange({ newDate });
                  setDate(newDate);
                }}
                inputVariant="filled"
                fullWidth
                minDate={new Date()}
              />
            </MuiPickersUtilsProvider>

“更改”是给我返回我在屏幕截图中共享的 OBJ，我想要得到的是日期。

我正在console.log(newDate)里面 做一个handleDateOnChange，里面没有更多的内容，所以我不分享它。console.log() 的结果就是您在上面看到的结果。