标签: material-ui

我已经学会了使用 @keyframe 在 css 中使用动画。然而，我想将我的自定义动画代码写入我的反应项目（使用 materialUI）。我的挑战是如何使用 MaterialUI 中的 makeStyle() 编写 javascript 代码来自定义我的动画。这次我希望能够在 materialUI 中以百分比形式自定义转换过程。我需要能够在 makeStyle() 中编写这样的代码，但我似乎不知道该怎么做。

@keyframes myEffect {
 0%{
  opacity:0;
  transform: translateY(-200%); 
 }

100% {
  opacity:1;
  transform: translateY(0);
 }
}

我创建了表单,我有几个TextField,包含DropDownMenu材料-ui组件,问题是如何从一个obj中收集所有TextFields,DropDownMenus中的所有数据并将其发送到服务器上.对于TextField,它具有TextField.getValue()返回输入的值.但我不明白如何使用它.

var React = require('react'),
    mui = require('material-ui'),
    Paper = mui.Paper,
    Toolbar = mui.Toolbar,
    ToolbarGroup = mui.ToolbarGroup,
    DropDownMenu = mui.DropDownMenu,
    TextField = mui.TextField,
    FlatButton = mui.FlatButton,
    Snackbar = mui.Snackbar;

var menuItemsIwant = [
  { payload: '1', text: '[Select a finacial purpose]' },
  { payload: '2', text: 'Every Night' },
  { payload: '3', text: 'Weeknights' },
  { payload: '4', text: 'Weekends' },
  { payload: '5', text: 'Weekly' }
];
var menuItemsIcan = [
  { payload: '1', text: '[Select an objective]' }, …

我能够将shouldForwardProp指定哪些道具应该转发到作为选项传递的包装元素放在一起styled()，但我无法找到其用例的可理解的示例。

这里的 prop 转发类似于在 React 中传递 props 吗？

为什么在使用时要阻止某些道具被转发到包装元素styled()？

请原谅我的无知或者我的问题不够清晰——我仍在学习 MUI 并试图理解它。

使用css-in-js方法向react组件添加类,如何添加多个组件？

这是classes变量:

const styles = theme => ({
 container: {
  display: 'flex',
  flexWrap: 'wrap'
},
 spacious: {
  padding: 10
},
});

这是我如何使用它:

    return (
     <div className={ this.props.classes.container }>

上面的工作,但是有没有办法添加两个类,而不使用classNamesnpm包？就像是:

     <div className={ this.props.classes.container + this.props.classes.spacious}>

当我尝试从 Material UI 导入一些图标时，我可以看到此错误。我按照建议安装了一些模块，但仍然没有修复。

包.json

    "@material-ui/core": "^4.12.3",
    "@mui/icons-material": "^5.0.1",
    "@mui/lab": "^5.0.0-alpha.49",

我尝试使用以下命令安装 /utils，

$ npm install @mui/material/utils

错误：

npm ERR! code ENOLOCAL
npm ERR! Could not install from "@mui\material\utils" as it does not 
contain a package.json file.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Han\AppData\Roaming\npm-cache\_logs\2021-10-03T21_47_03_649Z-debug.log

有什么我错过的吗？

**经过一番研究，我删除了“@material-ui/core”并安装了“@mui/core”。我认为出现此错误是因为名称从material更改为mui？

    "@mui/core": "^5.0.0-alpha.49",
    "@mui/icons-material": "^5.0.1",
    "@mui/lab": "^5.0.0-alpha.49",
    "@mui/utils": "^5.0.1",

谢谢。

根据演示，材质 UI 概述选择输入的标签应位于选择框的顶部边框的顶部。

然而，在我的应用程序中，z-index标签的 似乎将其放置在顶部边框后面，因此看起来像一条线穿过标签。

我几乎完全从文档中获取了代码，据我所知，没有任何样式与此输入元素冲突。我已将调试器中的样式与我拥有的样式和文档中的样式进行了比较，并且我没有看到任何第一方 CSS 文件导致在元素上设置不同的样式。

知道这里可能出了什么问题吗？

这是源代码：

<FormControl variant='outlined' style={{ width: '100%' }} margin={'1'}>
  <InputLabel id='test-select-label'>Label</InputLabel>
  <Select
    labelId='test-select-label'
    id='test-select'
    value={'test1'}
    onChange={e => setTest(e.target.value)}
    size='small'
  >
    <MenuItem key={1} value={'test'} >Test 1</MenuItem>
    <MenuItem key={2} value={'test2'} >Test 2</MenuItem>
  </Select>
</FormControl>

我发现Material UI的官方网站正在使用@material-ui/core和@mui/material。

但我发现如果我使用@material-ui/core或@mui/materialTextfield，UI 不起作用，问题如下所述

React - 材质标签不在文本字段中的正确位置

如果您在 Google 中搜索 Material UI，然后转到https://mui.com/，它会告诉您npm install @mui/material。但几周前，我正在使用npm install @material-ui/core

如果我的 package.json 中同时包含@material-ui/core和，并且我将 和都包含在 中，是否会出现任何导致 UI 混乱的冲突@mui/materialscriptstylesheetindex.html

更新 1
在@muiCodeSandbox 中，
如果您尝试Textfield使用selectprop，当您打开选择时，overflow: hidden将添加到正文中。

https://codesandbox.io/s/selecttextfields-material-demo-forked-z6b9f?file=/demo.js

在我的项目中， overflow: hidden; padding: 15px已添加到正文中，但我检查过我对此什么也没做！

doc上的属性列表不包括onClick (http://www.material-ui.com/#/components/icon-button)

我怎么知道我需要使用onClick for click handler？

每当我尝试使用makeStyles()具有生命周期方法的组件时，都会出现以下错误：

无效的挂接调用。挂钩只能在功能组件的主体内部调用。可能由于以下原因之一而发生：

1. 您可能使用了不匹配的React和渲染器版本（例如React DOM）
2. 您可能正在违反挂钩规则
3. 您可能在同一应用程序中拥有多个React副本

下面是产生此错误的代码的一个小示例。其他示例也将类分配给子项。我在MUI的文档中找不到任何显示其他使用方式makeStyles并可以使用生命周期方法的功能。

    import React, { Component } from 'react';
    import { Redirect } from 'react-router-dom';

    import { Container, makeStyles } from '@material-ui/core';

    import LogoButtonCard from '../molecules/Cards/LogoButtonCard';

    const useStyles = makeStyles(theme => ({
      root: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      },
    }));

    const classes = useStyles();

    class Welcome extends Component {
      render() {
        if (this.props.auth.isAuthenticated()) {
          return <Redirect to="/" />;
        }
        return (
          <Container maxWidth={false} className={classes.root}>
            <LogoButtonCard
              buttonText="Enter"
              headerText="Welcome to PlatformX" …

我指的是 React Material-UI 的文档（https://material-ui.com/components/autocomplete/）。

在演示代码中，

    <Autocomplete
      options={top100Films}
      getOptionLabel={(option: FilmOptionType) => option.title}
      style={{ width: 300 }}
      renderInput={params => (
        <TextField {...params} label="Combo box" variant="outlined" fullWidth />
      )}
    />

我知道它是如何工作的，但我不确定我应该如何获得选定的值。

例如，我想为此使用onChange道具，以便我可以根据选择进行一些操作。

我尝试添加 onChange={v => console.log(v)}

但v没有显示与所选值相关的任何内容。