标签: material-ui

将函数用作组件时，您可以使用useMediaQuerymaterial-ui 中的钩子。然而，它没有告诉你如何在类中使用这个钩子。

所以我做了一些研究，发现你可以通过这样做在课堂上使用它：

import React from 'react';
import useMediaQuery from '@material-ui/core/useMediaQuery';

const withMediaQuery = (...args) => Component => props => {
  const mediaQuery = useMediaQuery(...args);
  return <Component mediaQuery={mediaQuery} {...props} />;
};

export default withMediaQuery;

但是，当像这样将它添加到类时：

export default withStyles(styles)(withMediaQuery(Main));

它给了我这个错误：

index.js:1 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

我真的需要使用媒体查询，因为有些变量依赖于它们。这是我想使用媒体查询的类的渲染方法。

render() { …

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

我是 React 和 MUI 的新手，也许我只是错过了一些东西。

我正在尝试制作一个在我的调色板中定义的带有color='warning'的按钮（主题有效，我可以使用主要和次要颜色）：

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#70B657'
    },
    secondary: {
      light: '#2face3',
      main: '#4199D8',
      contrastText: '#ffcc00'
    },
    warning: {
      main: '#BC211D'
    }
  }
});

我在文档中注意到<Button>color 道具只需要default|inherit|primary|secondary所以不可能像那样使用它。那么在 Material-UI 中使用警告彩色按钮的正确或最佳实践是什么？我认为这是一个基本的东西，应该很容易实现..??

最好是不涉及制作多个不同主题并在需要时导入它们的解决方案。

谢谢！

我正在使用 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”。

如何禁用过滤？

我想为<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 …

我已经有一个我正在尝试在 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 …