小编Oli*_*ari的帖子

一些背景

我们的团队使用 Material UI 已经有一段时间了，我们很喜欢它。随着 Material UI v5 的发布，我们花时间检查下一步将使用哪种样式解决方案，因为 JSS 已被 MUI 团队放弃。

我们最终关注了Shopify 人员的讨论。他们对造型解决方案进行了非常详细的比较，最终选择了香草精作为他们的选择工具。强大的 TypeScript 支持，以及最重要的零运行时方法，让我们深信不疑。

遗憾的是，MUI 核心团队在决策时并未考虑香草精。

手头的问题

根据他们的文档， Material UI使用户能够使用各种样式解决方案。可以配置在引擎盖下使用的造型引擎，大致如下所述此处。

问题：

• 使用 vanilla-extract 是否（概念上）可能且（实用上）合理：
  • 设计 MUI 组件？
  • 使用它作为 MUI 底层的样式引擎？
• 洒水会在哪里发挥作用？
• 实施这一方法的具体步骤是什么？
• 有人已经这样做了，并且愿意分享他们的代码吗？

与通常的做法相反，我还没有真正尝试过任何实现方面的方法。根据我的理解，这意味着创建类似于mui-styled-engine（包裹情感）和mui-styled-engine-sc（包裹 styled-components）的东西。因为这对我来说似乎很复杂，所以我想我应该先问一下。

我试图将 React 项目中的页面包装在 Material UI 容器中，但它用这些奇怪的边距挤压了我的所有内容。它看起来是这样的：

但我希望它看起来像这样全宽：

尚未找到任何其他资源来解释如何更改容器的宽度。有人有解决方法吗？我尝试将容器的宽度调整为 100vw，但它对我的 CSS 没有响应。这是我的代码：

////BUY PAGE

import React from 'react';

import Container from '@mui/material/Container';
import AppBar from '../../components/AppBar/AppBar';
import Footer from '../../components/Footer/Footer';

import './Buy.css';

const Buy = () => {
    return (
        <Container>
            <AppBar />
            <Footer />
        </Container>
    );
};

export default Buy;

////CSS

.buy-container {
    overflow-y: hidden;
    width: 100vw;
}

我知道我必须使用 getRowId，但是我该如何使用它statId呢id？它是独一无二的。id或者为它们每个人生成一个属性？

错误：MUI：数据网格组件要求所有行都具有唯一的id属性。或者，您可以使用getRowIdprop 为每行指定一个自定义 id。rows 属性中提供了没有 id 的行：{"statId":813183,"teamId":3,"season":2021,"name":"Atlanta Hawks","team":"ATL","wins" ：41，“损失”：31，“fieldGoalsMade”：3492.1，“fieldGoalsAttempted”：7468.1，“fieldGoalsPercentage”：55.6，“twoPointersMade”：2427.9，“twoPointersAttempted”：4612.1，“twoPointersPercentage”：62.5，“ ThreePointersMade”：1064.2 ，“ ThreePointersAttempted”：2856，“ ThreePointersPercentage”：44.3，“ freeThrowsMade”：1684.8，“ freeThrowsAttempted”：2074.8，“ freeThrowsPercentage”：96.5，“进攻篮板”：903.6，“防守篮板”：3002.2，“篮板”：3905.9，“助攻”:2065.3、“抢断”:598.1、“封堵投篮”:405.4、“失误”:1086.7、“个人犯规”:1655.1、“得分”:9733.2、“双打”:120.1、“三双”:1.4}

import { useState, useEffect } from 'react';
import type { NextPage } from 'next';
import Container from '@mui/material/Container';
import Box from '@mui/material/Box';
import { DataGrid, GridColDef, GridRowIdGetter } from '@mui/x-data-grid';
import { Grid, Paper, Typography } from '@mui/material';
import Skeleton from '@mui/material/Skeleton';
import { blue } from '@mui/material/colors';

import FormOne from './../src/FormOne';
import …

因此，我将 Material UI Autocomplete 组件与 Next.js 一起使用，并收到此警告，我尝试解决但无法解决。错误来自 renderInput 函数吗？如果是这样，“...params”中没有“key”属性，所以我无法像警告消息建议的那样删除。

我该如何解决这个问题？

const top100Films = ['a', 'b', 'c', 'd'];

// props.tags = ['a', 'c']

<Autocomplete
  multiple
  id="tags-outlined"
  onChange={(event: any, newValue: string[]) => {
    props.onTagsChange(newValue);
  }}
  options={top100Films}
  value={props.tags}
  filterSelectedOptions
  renderInput={(params) => (
    <TextField
      {...params}
      label="Tags"
      placeholder="Tag"
    />
  )}
/>

hydration-error-info.js?32aa:26 Warning: A props object containing a "key" prop is being spread into JSX:
  let props = {key: someKey, tabIndex: ..., role: ..., id: ..., onMouseOver: ..., onClick: ..., onTouchStart: ..., data-option-index: ..., aria-disabled: …

我想将 Material UICircularProgress组件显示为几乎填满未知大小的父 div 所需的大小。比方说，尺寸应该是0.8 * min(parent_height, parent_width)。我尝试过愚弄max-width什么的，但没有成功。

我可以使用一些useDimension钩子来测量父母的尺寸，但我认为这是最后的手段。一定有一个纯 CSS 解决方案，对吗？

我正在尝试为 Material UI 中的组件创建自定义变体Button。

我的第一步是Button使用我想要的样式创建一个基于组件的组件：

// CTA.js

import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles({
  root: { // CUSTOM__STYLES },
  label: { // CUSTOM__STYLES },
});

const CTA = ({ children }) => {
  const classes = useStyles();

  return (
    <Button
      classes={{
        root: classes.root, 
        label: classes.label,
      }}
    >
      {children}
    </Button>
  );
};

然后，我将该组件导入到Button我正在创建的新组件中，如下所示：

// Button.js
import MuiButton from "@material-ui/core/Button";
import CTA from "./CTA";

const Button = ({ variant, …

我无法将我的图标添加到组件中。

https://codesandbox.io/s/materialuipickers-material-demo-forked-soctc

我使用的是 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 感到困惑。有人对此有任何想法吗？

我不想显示我的表的 id 字段。我使用 "@mui/x-data-grid": "^5.6.1" 版本。这是我的代码：

import * as React from 'react';\nimport { DataGrid } from '@mui/x-data-grid';\n\n\nconst columns = [\n    { field: 'id', headerName: 'ID', width: 50},\n    { field: 'testName', headerName: 'Test Name', width: 120,},\n    { field: 'testDate', headerName: 'Test Date', width: 160 },\n];\n\nexport default function DataTable(props) {\n\n    const rows = [id:1, testName:"test", testDate:"23/03/2022"];\n\n    return (\n        <div id="resultTable" >\n            <DataGrid\n                rows={rows}\n                columns={columns}\n                pageSize={5}\n                rowsPerPageOptions={[5]}\n\n            />\n        </div>\n    );\n}\n

Id 列可以隐藏或显示：none。我尝试使用

display: false\n

或者： …

我希望我的抽屉组件在 AppBar 组件下打开，而不是覆盖它。但是对于这个新版本的@Material-Ui/core，这从来没有发生过。

知道我该怎么做吗？

目前，它以一种涵盖 AppBar 的方式打开。这不是我想要的，我希望抽屉在 appBar 组件下打开，就像任何普通应用程序一样。

这是我的代码：

const styles = theme => ({


root: {
    flexGrow: 1,
  },
  flex: {
    flex: 1,
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20,
  },
  list: {
      width: 250,
  },

});


class ClippedDrawer extends React.Component {
  constructor(props){
    super(props);
    this.state={
     open: false,     
    }
  }

  toggleDrawer(){
    this.setState({
      open: !this.state.open,
    });
  };

  render(){
    const { classes } = this.props;
    return(
        <div className={classes.root}>
          <AppBar position="relative" className={classes.appBar}>
            <Toolbar>
              <IconButton className={classes.menuButton} onClick={()=>this.toggleDrawer()} color="inherit" aria-label="Menu">
                <MenuIcon />
              </IconButton>
              <Typography …