我在构建我的 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 组件一起正常工作。

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

我正在使用 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() 的结果就是您在上面看到的结果。

我们的应用程序是使用 Material-UI 库（带有主题）构建的。作为此应用程序的一部分，我们将 markdown 解析为 html（标记库）。

如何将material-ui主题（Typography）应用到纯html？

不知何故

<div dangerouslySetInnerHTML={ {__html: marked(markdown code)}}/>

应该具有由material-ui Typography 定义的样式

styled将 MUI 与 typescript 一起使用，并且也想从 MUI 中使用。当将组件属性传递给样式组件时，我从下面的打字稿沙箱中收到错误，也许有人知道解决方法。

https://codesandbox.io/s/material-demo-forked-lxdrj?file=/demo.tsx

我正在尝试使用 React Hook Form（版本 7.6.6）构建一个表单。我创建了一个 FormInput 组件，如下所示：

const FormInput = ({ name, label }) => {
  const { control } = useFormContext();

   return (
    <Grid item xs={12} sm={6}>
      <Controller
        control={control}
        name={name}
        render={({ field }) => {
          return <TextField {...field} label={label} fullWidth required />;
        }}
      />
    </Grid>
  );

我在这里使用它：

<FormProvider {...methods}>
        <form onSubmit={handleSubmit((data) => console.log(data))}>
            <FormInput name="firstName" label="First Name" />
            <FormInput name="lastName" label="Last Name" />
            <FormInput name="address1" label="Address 1" />
            <FormInput name="email" label="Email" />
            <FormInput name="zip" label="ZIP code" />
       
         
          <Button
            type="submit" …

我需要使用搜索输入作为下拉列表中的第一个选项来创建选择组件。像这样的事情：

主要问题是搜索组件在输入时表现正常。我不知道如何让它聚焦。谢谢。

在 Material-UI v4 中，fullWidth 属性可以传递给 Datepicker 组件。然而，在 v5 中，这个 prop 没有在组件 API 中列出。该组件的所有 css 选择器都是不确定的，因此我无法使用 width css 属性。有没有我错过的替代方案？

我正在尝试将 mui-v5 与样式组件和打字稿一起使用。然而，即使我将这一行添加到我的 tsconfig 中之后：

"paths": {
  "@mui/styled-engine": [ "./node_modules/@mui/styled-engine-sc" ]
}

我收到错误：

找不到依赖项：相对于“/node_modules/@mui/styled-engine/index.js”的“@emotion/styled”

当做：import { ThemeProvider } from "@mui/material/styles";

我制作了一个代码沙箱来展示我的设置。

有谁知道我做错了什么？

我尝试过使用ImageList组件而不是因为Grid我只需要带有标题的照片网格，这似乎是ImageList. 我的问题是，与网格不同，我无法为不同的屏幕尺寸传递断点道具（我觉得这很奇怪，因为这看起来很合乎逻辑），这样我就可以在不同的屏幕上获得不同的列数。根据屏幕尺寸调整列数的最佳方法是什么？