标签: material-ui

我需要为我的徽章组件添加自定义颜色，但它似乎不起作用

我试过这些

<Badge className="badge" badgeStyle={{backgroundColor: '#00AFD7'}} variant="dot" />

<Badge className="badge" color='#00AFD7' variant="dot" />

这些都行不通。如何将自定义颜色传递给我的徽章组件

所以，我正在尝试使用 Formik 和 Material UI 创建表单。对于所有字段，一切正常，但问题在于自动完成。我找不到从 localStorage 填充该字段的方法。我尝试了所有方法，从放置 value props、inputValue、defaultValue 等，但似乎没有任何效果。

import React from 'react'
import { Grid } from '@material-ui/core'
import { Autocomplete } from '@material-ui/lab'
import { Formik, Form, Field } from 'formik'
import { TextField } from 'formik-material-ui'
import * as yup from 'yup'
import { nationality } from '../../constants/nationality'
import Button from '../Button/Button'

export default function ForeignAddress () {

  let localStorageData = localStorage.getItem('foreignAddress'),
    retrivedData = JSON.parse(localStorageData)


  const handleNextClick = () => {
    console.log('clicked next')
  }

  const …

我所经历的MUI文档，在Autocomplete组件部分我有两个props，getOptionLabel而getOptionSelected我得到了定义，但我没有正确理解它。因此，如果有人可以通过示例以简单的方式给我正确的定义，那就太好了

我正在使用 Material-ui 与 TypeScript 模板进行反应。我的所有代码都工作正常，但我在多行上收到此错误（不是错误警告，而是在我的代码呈现时出现红线）

Could not find a declaration file for module 'react/jsx-runtime'. 'C:/Users/dell/Desktop/Web current Projects/typescript/card/node_modules/react/jsx-runtime.js' implicitly has an 'any' type.
  If the 'react' package actually exposes this module, consider sending a pull request to amend 'https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react`ts(7016)

我正在尝试制作一个弹出菜单，其中有几个不同的过滤器（按钮、选择和文本字段）。我正在使用 Material UI 菜单组件，但在尝试使用文本字段时遇到了问题。因为 Menu 组件的作用类似于<Select />，所以当我在文本字段中键入内容时，它会尝试选择不同的 MenuItem，而不是专注于文本框。

因此，使用下面沙箱中的示例，如果“搜索不同食物”文本框中以“A”、“B”或“C”开头，用户将无法输入任何内容。如果您想输入“apricots”，菜单会将焦点从文本框更改为“Apples”菜单项。

我在菜单 API 中没有看到任何支持此操作的道具，所以我很好奇是否有任何解决方法，甚至是更适合此操作的不同组件。

谢谢！

这是一个codesandbox：https ://codesandbox.io/s/wizardly-mccarthy-zy2b7

import { useState } from "react";
import "./styles.css";
import { Button, Menu, MenuItem, TextField } from "@material-ui/core";

export default function App() {
  const [menu, setMenu] = useState(null);
  const [text, setText] = useState("");

  return (
    <div className="App">
      <Button variant="outlined" onClick={(e) => setMenu(e.currentTarget)}>
        Filters
      </Button>

      <Menu
        anchorEl={menu}
        open={Boolean(menu)}
        getContentAnchorEl={null}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left"
        }}
        onClose={() => setMenu(null)}
      >
        <MenuItem>Apples</MenuItem>
        <MenuItem>Bananas</MenuItem>
        <MenuItem>Carrots</MenuItem>
        <MenuItem>
          <TextField …

有人使用 Vite 捆绑他们的 MUI 应用程序吗？我对来自 Vite/Rollup 的供应商块（1.1MB）有多大感到惊讶。我提出了以下配置，它将 MUI 包分成它自己的块：

import { defineConfig } from "vite";
import reactRefresh from "@vitejs/plugin-react-refresh";
import { dependencies } from "./package.json";

// whenever you get the error: (!) Some chunks are larger than 500kb after minification
// find the biggest lib in your vendors chunk and add it to bigLibs
const bigLibs = [
  { regExp: /^@material-ui*/, chunkName: "@material-ui" },
  { regExp: /^@aws-amplify*/, chunkName: "@aws-amplify" },
];

function getManualChunks(deps: Record<string, string>) {
  return Object.keys(deps).reduce(
    (prev, cur) …

我在我的项目中同时使用 Next JS 和 Material UI。对于图像优化，我想使用 Next JS Image 组件。

目前，我的卡片媒体如下所示。我从 API 调用中获取图像 URL row.image.url并将其分配给CardMedia组件的image prop

 <CardMedia
 className={classes.cardMedia}
 image={row.image.url}/>

import Image from 'next/image'