小编Oli*_*ari的帖子

时间选择器显示本地时区，如何将其更改为所需的时区？

图标按钮悬停

这是我正在使用的 Material-UI 中的 iconButton。正如您所看到的，当您将鼠标悬停在图标上时，它周围有一个轻微的灰色边框。禁用此功能的属性是什么？我在 Material-UI 文档中没有找到它，我需要摆脱这个灰色悬停功能。

代码：

<IconButton>
    <BackButton />
</IconButton>

所以我得到了最新版本的jss和material ui。我使用 withStyles HOC 并在样式对象中动态更改 css，但我似乎无法在 css 中声明关键帧。如果这有什么不同，我也使用 nextjs。我看过 material-ui 如何声明他们的动画，我正在关注他们的例子https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/ButtonBase/TouchRipple。 js。

import React, { useEffect, useState } from "react";
import classnames from "classnames";
import PropTypes from "prop-types";
import { withStyles, makeStyles } from "@material-ui/core/styles";
import { sectionAnchors, maxContentWidth } from "../../../util/constants";
import LearnMoreLink from "./LearnMoreLink";
import SectionContent from "../../common/SectionContent";
import content from "../../../../content";
import useRealHeight from "../../../util/useRealHeight";
import SplashHeading from "./SplashHeading";

import { singleHeight, doubleHeight } from "../../common/Footer";
import GetStartedForm from "./GetStartedForm";
import { withRouter } from …

我试图在一个单元格内有两行单独的文本，其中一行文本位于另一行之上，在 Material-UI 的数据网格组件中，似乎无法实现任何工作。这是我尝试过的：

 const columns: ColDef[] = [
        {
            field: "name",
            headerName: "Sector",
            width: 300,
            renderCell: (params) => {
                let name = params.data.name
                const flow = params.data as IOFlow;
                const title = Currency.format(flow.value)
                    + " " + props.direction
                    + " per " + Currency.format(1);
                return (
                    <>
                         <Typography fullWidth display='block'>
                              {name}
                         </Typography>
                         <br/>
                         <Typography fullWidth display='block'>
                              {title}
                         </Typography>
                    </>
                );
            }
        },
    ];

如果我还需要提供更多信息，请告诉我。

我正在使用 Material UI DataGrid 组件来渲染 EXCEL 文件。每个 Excel 文件都有多个列名称并具有特定的类型。例如：

const columns = [
    {
        "field": "uwgroup",
        "headerName": "Group",
        "minWidth": 200,
        "editable": true
    },
    {
        "field": "Amazing column Name ",
        "flex": 1,
        "minWidth": 150,
        "editable": true
    },
    {
        "field": "Building TSI",
        "type": 'number',
        "flex": 1,
        "minWidth": 150,
        "editable": true
    },
    {
        "field": "dev",
        "flex": 1,
        "minWidth": 150,
        "editable": true
    }
]

列 Name 的Building TSI类型为number。我invalid使用添加类名cellClassName，例如：

classnames({
   invalid: !isPositiveNumber(params.value)
})

它工作正常并呈现类名称并指示错误单元格。问题是，我想计算错误单元格的总数。原因是，如果任何单元格中没有错误，我们只允许将网格值保存到数据库中。

解决方案，我到目前为止已经尝试过：

1. 添加状态并在添加类时errorCount …

当我看到 MUI 的 default 时AppBar，它的子项看起来非常不同，尤其是在宽屏幕尺寸下。徽标位于完全左侧，其他导航位于右侧。所以项目看起来彼此分开。

我想要做的是像 Bootstrap 的组件，我想应用如下图所示的最大宽度。如何在其中设置容器AppBar？

这是我尝试过的。

<AppBar>
    <ToolBar>
        <Grid
             container
             style = {{ maxWidth: 1170 }}
         >
         <Typography>Logo</Typography> 
         </Grid>
    </ToolBar>
</AppBar>

但它不起作用......

使用 Material UI DataGrid，表格中的默认字体太小，看不清文本。

我的代码实际上是他们在页面上演示的复制/粘贴：

https://material-ui.com/components/data-grid/

我的表格中的字体很小。页面的其余部分不使用 Material UI（菜单等）都可以。在 Firefox 开发工具 Inspector 中我看到

继承自div： .MuiDataGrid-root { font-size: 0.875rem; }

在浏览器工具中将其更改为 10px 之类的值，或完全禁用它，确认这就是需要更改的值。编译时它会自动添加到末尾（内联），因此它会覆盖我以前的样式。愚蠢的是，我找不到在哪里添加它。

我查看了几个使用同一张表作为示例的网站，但没有一个网站存在此问题。有人可以告诉我在哪里看，如何修复默认字体大小不正确的表格吗？

我有这些相关的内容：

包.json：

"@material-ui/core": "^4.11.0",
"@material-ui/data-grid": "^4.0.0-alpha.6",
"fontsource-roboto": "^3.0.3",

索引.html

<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />

缩写的 .jsx 代码：

import React from 'react';
import { DataGrid } from '@material-ui/data-grid';

const DemoTableMui = () => {
...

 const columns = [{ field: 'id', headerName: 'ID', width: 70 } ]
 const rows = [{ id: 1, lastName: 'Smith', firstName: 'Jon', …

我们需要从 Material UI 自定义DataGrid中使用的大部分图标。阅读非常有限的文档，我们无法弄清楚如何做到这一点。

该文档讨论了插槽（但没有解释如何使用它们）。有一个icons属性，但我们不确定是否IconsOptions与插槽相同。无论如何，我们尝试了以下方法：

      <div style={{ height: 400, width: "100%" }}>
        <DataGrid
          rows={rows}
          columns={columns}
          pageSize={5}
          disableSelectionOnClick
          icons={{
            ColumnMenuIcon: AcUnit
          }}
          />
      </div>

以及以下内容：

      <div style={{ height: 400, width: "100%" }}>
        <DataGrid
          rows={rows}
          columns={columns}
          pageSize={5}
          disableSelectionOnClick
          ColumnMenuIcon={AcUnit}
          />
      </div>

无济于事。我们尝试使用<AcUnit/>替代，但没有改变。尝试阅读代码，但这也没有真正帮助......

这样做的正确方法是什么？如果这是在 React 或 Material UI 中执行操作的标准方法，我们在哪里可以找到一些文档？

这是一个代码沙箱。

如何在没有换行的情况下制作带下划线的文本enter？

   <Typography sx={{ 
          top: '104px',
          fontFamily: 'Roboto',
          fontStyle: 'normal',
          fontWeight: 'normal',
          lineHeight: '24px',
          fontSize: '16px',
          letterSpacing: '0.18px',
          color: '#172B4D',
          margin: '16px 0px'
       }}>
      The big brown fox jumps over the <Typography sx={{textDecoration: 'underline'}}>lazy </Typography> dog
      </Typography>

摘要
\n我们项目中的 cypress 测试套件在将 React 更新到版本 18 和将 Next.js 更新到版本 13 的分支上的一些测试始终失败。单击元素失败，\xe2\x80\x98 元素已与DOM\xe2\x80\x99 错误。开发环境设置为反应严格模式，测试在该模式上运行。

问题
\n我们使用的是 Material UI 5，测试是检查不同的输入和按钮。\n测试中的总体问题是无法单击 Material UI 中的复选框输入以及卡片上的链接也来自 MUI 的组件。该复选框位于对话框模式组件中。

测试在 click() 命令上不会出错，并且测试会像单击该命令一样继续进行，但屏幕上的复选框实际上并未被单击。在单击之后添加 cy.wait() 确实会导致复选框实际被单击，但我更喜欢等待的替代方法。

但是，当单击 Card 组件中的链接时，click() 命令的测试会失败，并出现以下错误：\n click() 上的 Cypress 错误

向单击 \xe2\x80\x98vehicle-card-link\xe2\x80\x99 元素的 click() 添加等待，使测试和单击变得非常不稳定，并且以某种方式使之前在同一测试套件中进行的其他测试变得不稳定没有失败，更脆弱。

测试代码
\n以下是失败的 cypress 测试代码，并添加了上下文注释：

// The test\ncy.getBySel(\'more-filters-button\').click(); // Opens the MUI Dialog Modal\ncy.get(\'input[name="condition"][value="New"]\').click(); // Gets the Checkbox component and clicks on it\ncy.getBySel(\'save-filter-modal\').click(); // Clicks a button to close the modal\ncy.getBySel(\'vehicle-card-link\').first().click(); // Gets …