标签: material-ui

是否可以拖放和更改 Material UI 卡的排序？如果是这样，如何？ https://material-ui.com/components/cards/

我正在使用 material-ui Autocomplete。当用户更改输入时，它会异步从后端获取建议。这是代码的一部分：

const [options, setOptions] = useState([]);

<Autocomplete
  ...
  freeSolo={true}
  options={options}
  renderInput={params => (
    <TextField
      ...
      {...params}
      onChange={async (e) => {
          // get suggestions from backend
          const suggestions = await getSuggestions(e.target.value);

          // update autocomplete options
          setOptions(suggestions);

          ...
      }}
      InputProps={{
        ...params.InputProps,
        endAdornment: (
          <React.Fragment>
            {loading ? <CircularProgress color="inherit" size={20} /> : null}
            {params.InputProps.endAdornment}
          </React.Fragment>
        ),
      }}
    />
  )}
/>

问题是 material-ui 自动完成没有显示使用“setOptions”设置的所有选项。它过滤它们。

例如：假设用户输入“appl”，getSuggestions 返回[“apple”, “orange”, “potato”]。但它只显示“apple”，因为它过滤掉了“orange”和“potato”。

如何禁用过滤？

我之前用过其他的react组件，他们大多有自己的Image组件，但是我在Material-UI中找不到？

还是通过 CardMediaAPI 完成？还是简单地使用标签？谢谢！

我想为<p>当前组件中的所有人添加规则。我在任何地方都找不到有关如何按标签名称添加 CSS 规则的信息（material-ui 文档、Stack Overflow 等）。

不支持吗？

我正在尝试做这样的事情：

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        'p': {
            margin: 0,
        },
        someClass: {
            fontSize: 14,
        },
    })
);

编辑：

使用 Ryan 的解决方案有效，但会产生一个新问题：

import React from 'react';
import { makeStyles, Theme, createStyles } from '@material-ui/core';

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        root: {
            '& p': {
                margin: 0,
            },
        },
        // I want this rule to override the rule above. It's not possible in the current configuration, because `.root …

我们使用自定义组件 (MySnackbarContent) 扩展了 SnackbarContent 组件：

export interface MySnackbarContentProps extends Omit<SnackbarContentProps, 'variant'> {
  variant?: MyCustomVariant;
  type?: MyCustomType;
  banner?: boolean;
  // ...
}

const MySnackbarContent = forwardRef<HTMLElement, MySnackbarContentProps>(props: MySnackbarContentProps, ref) => {
  const { variant = 'normal', type = 'default', banner = false, ...other } = props;
  const className = ...;

  return <SnackbarContent ref={ref} className={className} {...other} />
}

这是我在使用自定义 SnackbarContent 组件时遇到的错误：

类型 '{ type: "error" | 中缺少属性 'css' “默认” | “成功” | 不明确的; 消息：字符串；动作：元素；}' 但在类型 'Pick<MySnackbarContentProps, "hidden" | 中是必需的 "风格" | "onSelect" …

我已经有一个我正在尝试在 Material UI 中实现的样式指南。我可以看到按钮的颜色道具采用以下选项：

| 'default'
| 'inherit'
| 'primary'
| 'secondary'

但是我需要一个额外的：

| 'default'
| 'inherit'
| 'primary'
| 'secondary'
| 'tertiary'

您能否在 Material UI 中创建一种与通用主题系统配合使用的新颜色？或者这不是真的应该如何使用它？

以下是我正在使用的软件包版本。

React version - 16.13.1
react-router-dom version - 6.0.0-beta.0
react-redux version 7.2.0
Material UI version 4.11.0

isDirty当用户试图离开当前页面时，如何/什么是检查表单（已更改）的最佳方法？如果表单isDirty.

我将从内部获取数据useEffect()并使用 redux reducer 来呈现 UI。

我应该声明一个变量来保留原始获取的数据以进行脏检查吗？

这就是我正在做的事情，但它无法正常工作。

组件.js

 useEffect(() => {
    props.fetchUserInfo();
 })

动作.js

export function fetchUserInfo() {
 return (dispatch) => {
     dispatch({type: USER_INITIALSTATE, {Name: 'abc', Age: 20}} 
     )
 }
}

userReducer.js

const initialState = {
  processing: false,
  success: false,
  fail: false,
  Profile: {}
}
let oriState;
let State;
const UserReducer = (state = initialState, action) => { …

我无法在 Material-UI 数据表的每一行中添加一个按钮我有一个 Material-UI 数据表，我像这样渲染

<DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />

我已将按钮应位于的列变量“操作”列添加到列中。行只是我从道具中获得的数据对象。如何在每一行中添加一个按钮（用于编辑行）？我尝试映射数据数组，但不可能将 JSX 按钮添加到每个数据对象中

我在服务器端渲染应用程序中集成了材质 UI，并遵循了此处给出的代码。Material UI css 已添加到服务器端本身的 html 中。

但是，在初始加载时，不会应用材质 ui 样式，这会导致它闪烁。

我尝试<cssbaseline>与下面的代码一起使用，但没有看到任何区别。

这是我的代码：server.js

import App from '../common/containers/App';
import { Provider } from 'react-redux';
import React from 'react';
import configureStore from '../common/store/configureStore';
import express from 'express';
import qs from 'qs';
import { renderToString } from 'react-dom/server';
import serialize from 'serialize-javascript';
import { StaticRouter, matchPath } from 'react-router-dom';
import {theme} from '../theme';
import { ServerStyleSheets, ThemeProvider } from '@material-ui/styles';
import routes from './routes'
import "../common/assets/SCSS/app.scss";

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST); …

所以我有一个表单，其中包含我通过来自 react-hook-form 的 Field Array 添加的自定义字段。一切正常，但我为属性项添加了拖放功能（以重新排序），现在直接显示所有这些许多字段会很麻烦，所以我将它们移动到对话框中。

以下是了解什么更容易拖放的图片......（正确的）

问题是字段数组值在模式关闭后“重置”（在我在编辑模式中输入这些表单值之后），我猜这与重新渲染有关，但我不确定。

我试图在没有 d&d 和其他无用的东西的情况下展示最小的代码示例......
但这里是带有完整代码的代码和盒子游乐场

创建CategoryForm.js

const defaultValues = {
  name: "",
  slug: "",
  description: "",
  properties: [] // field array
}

function CreateCategoryForm() {
  const methods = useForm({ defaultValues });
  const { handleSubmit, control, errors } = methods;
  const { fields, append, remove, swap } = useFieldArray({ name: "properties", control });

  const onSubmit = async (data) => {
    console.log("data: ", data);
  };

  return (
    <Container>
        <FormProvider {...methods}>
          <form onSubmit={handleSubmit(onSubmit)} noValidate>
            <FormTextField …