标签: material-ui

如何使用 Next JS 在同一 Web 应用程序的转换之间创建加载程序页面？

现在，在开发环境中，页面有正常的过渡，这意味着 CSS 已正确应用于每个页面。当将应用程序构建到生产环境时，问题就开始了，例如，当我单击具有链接组件到另一个页面的按钮时，它会显示如下 1 或 2 秒：

1 或 2 秒后，它会相应地呈现：

很抱歉问了这个模糊的问题，但我不知道从哪里开始解决这个问题，我想它会通过两种可能的解决方案来解决：

1. 页面转换之间的加载页面。
2. 在 _app.js 或 _document.js 上做一些事情，但现在我不知道如何开始在这里查找。

假设我有一个客户列表，并以表格格式显示它们。

我可以在每个客户行的末尾添加一些图标，以让用户管理每一行。典型的图标是删除和编辑之类的图标。

现在我想添加一个图标/操作，它打开一个对话框，将一些数据从行传递到对话框，并在对话框关闭时从对话框获取数据。

在 Angular 中，我会很容易地做到这一点。因为我可以以编程方式调用一个showDialog方法或类似的方法，并将参数传递给它，并获取结果。它非常有活力。

然而，在 React + Material UI 中，我陷入了困境。

我想渲染一个对话框，并在单击每一行的操作时，我想显示该对话框并将数据传递给它，并从中获取数据。

正确的做法是什么？

在 v5 中，尝试创建一个从深色模式切换到浅色模式的切换对我来说相当困难。

直接使用来自 MUI Sandbox MUI darkmode的代码，我尝试将代码分离以在 app.js 和我的 Navbarpractice.js 中工作。

应用程序.js

import React from "react";
import useMediaQuery from '@mui/material/useMediaQuery';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { Paper } from "@mui/material";
import BasicCard from "./components /Card.js";
import Navbarpractice from "./components /Navbar/Navbarpractice"

const ColorModeContext = React.createContext({ toggleColorMode: () => {} });


function App() {
  const [mode, setMode] = React.useState('light');
  const colorMode = React.useMemo(
    () => ({
      toggleColorMode: () => {
        setMode((prevMode) => (prevMode …

我想更改 MUI datePicker 中所选日期的背景颜色。如下图所示，我需要将蓝色更改为其他颜色。
下面是我的代码

const useStyles = makeStyles(theme => ({
  datePickerStyle: {
    "& .css-bkrceb-MuiButtonBase-root-MuiPickersDay-root.Mui-selected": {
    backgroundColor: "red",
    color: '#000000'
  },
  }

        <DatePicker
          disablePast
          value={checkout.rideDate}
          shouldDisableDate={getDisabledDates}
          onChange={(newValue) => {
            dispatch(setRideDate(newValue?.toISOString().split('T')[0]))
          }}
          renderInput={(params) => <TextField className={classes.datePickerStyle} {...params} 
          />
          }

我正在完成我的第一个项目，但客户希望我在标签悬停在某些数据网格单元格上时添加标签。

但是，我在 Google 上找不到有关如何在标题名称上添加 Material ui Tooltip 的任何答案。

请有人帮助我。

这是我的代码。我只会在列中保留一些标题，因为它们都非常相似。

 const columns = [
    {
        field: 'memberId',
        headerClassName: 'super-app-theme--header',
        headerAlign: 'center',
        headerName: 'Member ID',
        sortable: true,
        width: 200
    },
    {
        field: 'materialId',
        headerClassName: 'super-app-theme--header',
        headerName: 'Material ID',
        headerAlign: 'center',
        sortable: true,
        width: 200,
        editable: true,
    },
];

const newMembers = []

for(let index in members) {
    newMembers.push(members[index])
}

const displayApiData = () => {
    const loading = [{
        id: 'Calculating...',
        memberId: 'Calculating...',
        materialId: 'Calculating...',
        sectionId: 'Calculating...',
        lm: 'Calculating...',
        lx: 'Calculating...', …

我正在尝试使用材质 UI 中的按钮。我以按钮为例，其中有一个开始图标。但是我无法覆盖 StartIcon CSS 附带的默认边距

我尝试了不同的方法来覆盖它

<Button sx={{ '& .MuiButton-startIcon': {marginRight: '0px'}}} startIcon = {settings_slider}> All Filters </Button>

<Button sx={{ root: {'& .MuiButton-startIcon': {marginRight: '0px'}}}} startIcon = {settings_slider}> All Filters </Button>

<Button sx={{ startIcon: {'& .MuiButton-startIcon': {marginRight: '0px'}}}} startIcon = {settings_slider}> All Filters </Button>

什么都没起作用。

您可以在此处找到运行示例https://yzbbo5.csb.app/

标题说明了一切 - 我的分隔符不在文本中间。我当前的结果如下所示：

但我希望我的分隔线像这样位于中间（参见红线）

奇怪的是，material ui 文档表明这是默认行为，但由于某种原因，对我来说情况并非如此。

我的代码如下：

<Divider textAlign="center" variant="inset"><Typography variant="h3">About</Typography></Divider>

我有两个自动完成组件和一个元素，单击该元素会在两个自动完成组件之间切换值。当我这样做时，我也会切换选项。在自动完成组件中，我正在使用所选值渲染隐藏字段。当我单击切换值的元素时，我可以在 DOM 中看到隐藏字段在 2 个自动完成组件之间正确更新。当我单击下拉菜单时，我还可以看到正在切换的选项。但标签/文本字段没有更新。原始标签将保留，不会更新为新标签。

父组件：

import React, { useState, useEffect, Suspense } from 'react';

import classes from './AirForm.module.css';

const AirType = React.lazy(() => import('./Controls/Air/AirType'));
const Airport = React.lazy(() => import('./Controls/Air/Airport'));

const AirForm = props => {
    const [airTypeSelected, setAirTypeSelected] = useState('RoundTrip');
    const [fromSelected, setFromSelected] = useState();
    const [fromOptions, setFromOptions] = useState([]);
    const [toSelected, setToSelected] = useState();
    const [toOptions, setToOptions] = useState([]);
    //const [switchFromTo, setSwitchFromTo] = useState(true);

    const switchFromToHandler = () => {
        setFromOptions(toOptions);
        setToOptions(fromOptions);
        setFromSelected(toSelected);
        setToSelected(fromSelected);
        //setSwitchFromTo(!switchFromTo);
    }

    //useEffect(() …

我正在尝试将 Material-ui 从版本 4.11 升级到版本 5，但面临主题问题

import { createTheme } from '@mui/material/styles';

import {
  ThemeProvider,
  StyledEngineProvider,
} from '@mui/material/styles';



const theme = createTheme({
...custom themes
  });

 <StyledEngineProvider injectFirst>
          <ThemeProvider theme={theme}>
              <App />
          </ThemeProvider>
        </StyledEngineProvider>

Inside the app

scenario 1
import { makeStyles } from "@mui/styles";

scenario 2
import { makeStyles } from "@material-ui/core";

const useStyles = makeStyles((theme)=>{
console.log("theme ",theme)
  return ({
     ...my themes
  })
}

如果是 mui/styles，控制台会在场景 1 中显示一个空对象，而在使用 Material-ui 的场景 2 中则有主题对象可用

我正在使用 Material UI 在 React.js 中进行响应式 UI 设计，我必须遵循这些考虑因素，并且可以制定最佳且简单的方法来实现响应式 UI 仪表板 - 我正在寻找最好的帮助资源、文档和博客。