相关疑难解决方法(0)

尽我所能，我无法理解这里给出的描述：https : //material-ui.com/components/box/

“Box 组件充当大多数 CSS 实用程序需求的包装器组件。” 什么是 CSS 实用程序需求？

这个组件的用例是什么？它解决什么问题？你如何使用它？

我发现 material-ui 文档非常有限且难以理解。我用谷歌搜索过，但通常只找到了关于如何使用 Material UI 的相当轻量级的博客文章。除了帮助理解这个组件之外，我真的很感激任何好的资源（比如他们自己文档的更好版本，如果存在的话）。

（背景，我大体了解React、JS、CSS、HTML等，后两者实力较弱）。

谢谢你。

我非常喜欢React中的内联CSS模式(视频),我正在考虑使用它.但是我有一个类似于这个的问题.

如何使用React的内联CSS模式为应用程序实现媒体查询.

对于移动设计，设计通常具有较小的标题字体。

Material-UI是否具有使版式响应的机制？

我看到默认主题具有在rems中定义的字体大小-这是否意味着仅减小基本字体大小就可以了？（这似乎不起作用，如果您想以不同的比率减少标题字体怎么办）。

我有一个使用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} …

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

有谁知道如何或知道如何创建一个被动的应用程序栏和抽屉的任何示例？

它需要能够动态地取消对接抽屉并在浏览器较小时隐藏,并在较大时将抽屉停靠,最好动态像材料-ui网站已经做的那样:http://www.material-ui.com/# /组件/抽屉

我正在开发一个使用 MUI 作为 React 应用程序的 UI 库的项目。今天我开始迁移到 v5，我面临着withWidth().

官方文档介绍了一个以 名称 开发的新 Hook useWidth，我不知道我的函数应该如何从该 hook 获取属性宽度。

我的功能组件是这样的：

import { GridList, Grid } from "@material-ui/core";
import withWidth, { isWidthUp } from "@material-ui/core/withWidth";

import {
  ExtraTile,
  ExtraDiv,
  ExtraDescriptionText,
  ExtraPriceText,
} from "components/Extras/components/ExtraTiles";

import {
  SwitchExtra,
  SwitchExtraImage,
  SwitchTextDiv,
  SwitchDiv,
} from "components/Extras/components/SwitchExtraTiles";

function ExtraSwitchComponent(props) {
  return (
    <GridList
      cellHeight={isWidthUp("md", props.width) ? 100 : 200}
      cols={1}
      spacing={0}
    >
      <ExtraTile
        style={{ cursor: "auto" }}
        key={props.type + "-tile"}
        cols={1}
        component="div"
      >
        <ExtraDiv> …

我使用容器，移动设备和桌面设备的大小需要不同。

如何根据断点使容器 具有不同的大小，如下所示：maxWidth

<Container maxWidth={{xs:"lg", lg:"md"}}>