标签: material-ui

在 Material UI Grid 中，为了垂直间隔 Grid Item，我在 Grid Container 中提供了间距。它在大屏幕上看起来不错，但在移动设备上，它会导致网格项目之间的水平间距尴尬。

<Grid container spacing={24}>
  <Grid item xl={6} md={6} sm={12} xs={12}>
    <TextField
      required
      id="outlined-email-input"
      label="Customer Name"
      name="email"
      fullWidth
    />
  </Grid>
  <Grid item xl={6} md={6} sm={12} xs={12}>
    <TextField
      required
      id="outlined-email-input"
      label="Customer Name"
      name="email"
      fullWidth
    />
  </Grid>
</Grid>

如何在网格中具有不同的垂直和水平间距？

我目前正在使用全局主题覆盖自定义一些组件，希望尽可能保持 Material-UI 主题引擎的完整性。我知道我可以使用组合来完成我想要做的事情，但我想看看是否可以通过覆盖来实现这一点。

目标

将 BottomNavigation 组件的背景色更改为使用当前主题的主色，并确保标签的颜色在该背景色之上清晰易读。

我目前的方法

const theme = createMuiTheme({
    palette: {
      primary: {
        main: 'rgba(217,102,102,1)'
      }
    },
    overrides: {
        MuiBottomNavigation: {
            root: {
                backgroundColor: 'rgba(217,102,102,1)'
            }
        },
        MuiBottomNavigationAction: {
            wrapper: {
                color: '#fff'
            }
        }
    }
});

此代码完成任务并将底部导航变为红色，将标签/图标变为白色。但是，我希望能够灵活地更改调色板中的主要颜色并相应地更新组件。

我想做什么

const theme = createMuiTheme({
    palette: {
      primary: {
        main: 'rgba(217,102,102,1)'
      }
    },
    overrides: {
        MuiBottomNavigation: {
            root: {
                backgroundColor: 'primary.main'
            }
        },
        MuiBottomNavigationAction: {
            wrapper: {
                color: 'primary.contrastText'
            }
        }
    }
});

通过这种方式，我可以轻松更新原色，而不必担心在我的覆盖范围内更改对它的每个引用。我意识到我可以将rgba值提取到 a 中const …

在Material-UI 中，有一个makeStyles函数可以用来获取自定义的 CSS-Styling。

如果我不在该特定 CSS 中使用主题，我应该使用它吗？

例如：

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

const classes = {
  paper: {
      backgroundColor: "#eee",
      marginLeft: "30%",
       marginRight: "30%"
  },
  textField: {
      backgroundColor: "#fff"
  },
  button: {
      backgroundColor: "green",
      marginLeft: 20
  }
};

const Ohne = () => {
  console.log(classes);
  return (
      <Paper style={classes.paper}>
      <Box>
          <TextField style={classes.textField} />
          <Button style={classes.button}>abc</Button>
      </Box>
      </Paper>
  );
};

export default Ohne;

对象是：

{
    "paper": {
        "backgroundColor": "#eee", …

我正在使用 React 和 material-ui .. 我刚刚意识到当我尝试提交表单时，自动完成组件有一个警告，所以我尝试做一些非常基本的事情，就像在文档中一样：

let Form = props => {

  return(
        <form noValidate onSubmit={handleSubmit} >
            <Autocomplete
                id="combo-box-demo"
                options={[{id:1,name:"test"},{id:2, name:"test2"}]}
                getOptionLabel={(option) => option.name}
                style={{ width: 300 }}
                renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
            />

当我尝试提交表单时，出现以下错误：

Material-UI：提供给自动完成的值无效。没有一个选项与{"id":1,"name":"test"}. 您可以使用getOptionSelectedprop 来自定义相等性测试。

我也意识到，如果我在组件状态中设置选项，则没有警告（仅当它们像常量一样设置时）。所以我想知道你们中的一些人是否对这种行为有任何想法？非常感谢你。

Material-UI中Box和Grid的区别是什么

何时使用每个

我对此感到困惑

PIC-1

这就是我所拥有的（图1）

PIC-2

这就是我需要的（图2）

在pic-2中我添加了

width: -webkit-fill-available;

我得到了我所期望的。但我不知道它是如何运作的。

我使用的是 Material UI 版本 5.2.7。当我从 导入 makeStyles 时@mui/materials/styles，出现以下错误 -

Uncaught Error: MUI: makeStyles is no longer exported from @mui/material/styles. You have to import it from @mui/styles. See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.

它还说@mui/styles在 Material UI 版本 5 中已弃用。所以我对如何导入 makeStyles 感到困惑。有人对此有任何想法吗？

最近，我的 React 应用程序中开始出现一个新错误：

ResizeObserver loop limit exceeded

似乎普遍的共识是该错误是良性的，没有什么可担心的。

但是，当我通过 测试我的程序时，我不确定如何忽略它或让它停止显示npm start。

出现的屏幕如下所示：

有什么方法可以抑制此页面或其他地方的此特定错误，这样我就不必每次都将其忽略？

该错误来自我使用的MUI Masonry 组件，但我的理解是它可能来自许多依赖项。

这是我使用它的代码，以防有助于抑制此错误。

import Masonry from '@mui/lab/Masonry';
import { Box } from '@mui/material';
import { ReactNode } from 'react';
import { BsFillPlusSquareFill as AddButton } from 'react-icons/bs';
import { useNavigate } from 'react-router';
import { LoadingIndicator } from '../LoadingIndicator';
import { BackButton } from './BackButton';
import styles from './SheskaList.module.css';

export const SheskaListContent = (props: { loading: boolean, cards: ReactNode[] }) …

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

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

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

但它没有用.

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

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

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