标签: material-ui

NoRowsOverlay应用过滤器后，该过滤器不起作用，因此没有可显示的行。

这是我的代码：

function customNoRowsOverlay() {
    return (
        <GridOverlay>
            <div>No Rows</div>
        </GridOverlay>
    )
}

components={{ NoRowsOverlay: customNoRowsOverlay }}

如果应用过滤器后没有要显示的行，我需要显示“无行”消息。但是，如果您有以上代码，则可以使用rows={[]}

我从 Mui 4 迁移到 5，想知道如何使用类名。如果我想将某些样式仅应用于一个组件，则可以使用 SX 属性。但是，我正在努力为多个组件使用相同的类。在 v4 中，我的代码如下所示：

export const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      padding: theme.spacing(1),
      margin: 'auto',
    },
  })
)

我可以在任何组件中导入这个useStyles钩子并像这样使用它：

const classes = useStyles()
...
<div className={classes.root}>...</div>

该文档说，我可以“用类名覆盖样式”，但他们没有告诉如何做到这一点： https://mui.com/customization/how-to-customize/#overriding-styles-with-class -名称

我是否必须将这些样式放入外部 CSS 文件中？

.Button {
  color: black;
}

我宁愿在我的 ts 文件中定义样式。

我还找到了这个迁移指南： https ://next.material-ui.com/guides/migration-v4/#migrate-makestyles-to-emotion

我不喜欢方法一，因为使用这个 Root 包装器，有条件地应用类很不方便。（特别是对于打字稿，有一些开销）方法二带有外部依赖项和一些样板代码。

理想情况下，我会使用这样的样式，也许在样式对象周围使用一个说唱歌手函数：

export const root = {
  padding: theme.spacing(1),
  margin: 'auto',
}

<div className={root}>...</div>

当然，最后一种方法不起作用，因为 className 需要一个字符串作为输入。有人知道有很少样板代码的替代方案吗？

一些背景

我们的团队使用 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）的东西。因为这对我来说似乎很复杂，所以我想我应该先问一下。

<DesktopDatePicker
    label="Expiration Date"
    inputFormat="MM/dd/yyyy"
    value={self.didexpirationdate}
    onChange={(e)=>{
    setSelf({...self,didexpirationdate:e})
    }}
    renderInput={(params) => <TextField {...params} />}/>

如何在反应中设置此日期选择器的高度？

我在控制台中收到此消息:

失败的上下文类型:muiTheme未指定 必需的上下文AppBar

AppBar.js:158 Uncaught TypeError:无法读取未定义的属性'prepareStyles'

我在我的组件中只有一个AppBar我认为它应该可以工作但是...这里我的代码非常简单:

import React from 'react';
import {AppBar} from 'material-ui';


    export class MyComponent extends React.Component {

        render() {
            return (
                <div>
                    <AppBar
                        title="Title"
                    />

                </div>
            );
        }

    }

谢谢你的帮助......

我正在使用 Material-UI，但我有点困惑。有组件，Typography但我无法真正理解何时使用它以及它的目的是什么。

应该Typography什么时候使用？它解决/帮助什么问题，或者如果我在开发时使用它会有什么好处？

一个例子对我更好地理解它非常有用。

我对 Material UI 很陌生，我正在尝试使用这样的文本颜色设置排版：

const theme = createMuiTheme({
  palette: {
    text:{
      primary: "#FFFFFF"
    }
  }
});

const WhiteText = (props: { text:string, varient: Variant | 'inherit'}) => {
  return <ThemeProvider theme={theme}>
      <Typography variant={props.varient} align="center" color="textPrimary">{props.text}</Typography>
  </ThemeProvider>
}
...
<WhiteText varient="h3" text="This text should be white"/>

但文本不会改变颜色：/

我应用主题错了吗？

我试图删除当您关注 Material UI 的 DataGrid 组件中的单元格时出现的轮廓。

这些方法都不起作用：

const useStyles = makeStyles((theme) => ({

// Method 1:
  '@global': {
    '.MuiDataGrid-cell:focus': {
      outline: 0,
    },
  },

// Method 2:
  cell: {
    '& .MuiDataGrid-cell:focus': {
      outline: 0,
    },
  },

// Method 3:
  cell: {
    ':focus': { outline: 0 },
  },

const classes = useStyles()

const dataGridColumns: GridColumns = [
    {
      ...other,
      cellClassName: classes.cell,
    }]

编辑：

'@global': {
        '.MuiDataGrid-root .MuiDataGrid-cell:focus': {
          outline: 0,
        },
      },

为我工作，但我不想使用全局 CSS 调整。

我创建了一个使用 Material-UI 和 @react-two/fibre 库的 Next.js 应用程序。

我最近将Material-UI传递到V5并出现错误。

这是错误：

我搜索了所有内容以将其删除，但什么也没找到。

所以我尝试使用Material-UI V5创建一个新项目，并一一安装其他依赖项。一开始，错误没有显示，但是当我安装时@react-three/fiber，@react-three/drei错误出现了。

所以我发现有一个Box组件是从中导出的@material-ui，@react-three/drei所以我现在明白了这个错误。

这是我的package.json：

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/react": "^11.4.0",
    "@emotion/styled": "^11.3.0",
    "@material-ui/core": "^5.0.0-beta.2",
    "@material-ui/styles": "^4.11.4",
    "@react-three/fiber": "^7.0.6",
    "next": "11.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/react": "17.0.16",
    "eslint": "7.32.0",
    "eslint-config-next": "11.0.1",
    "typescript": "4.3.5"
  }
}

我的 …

这是有关主题MUI v5 的问题的后续问题。尽管我的问题得到了解答，但我仍然很难理解@emotion/reactAPI 的确切位置以及何时@mui/material/styles 应该使用。我阅读了迁移指南，虽然这确实回答了一些“如何”问题，但我不了解更大的情况。

我什么时候使用MUI的造型，什么时候使用情感？为什么有两种造型解决方案？我应该使用 MUIThemeProvider还是 Emotion？有什么区别？这些问题对于有经验的用户来说可能是微不足道的，但对于刚刚入门的人来说，这些问题需要理解和理解。