标签: material-ui

我正在使用 Material-UI，但我有点困惑。有组件，Typography但我无法真正理解何时使用它以及它的目的是什么。

应该Typography什么时候使用？它解决/帮助什么问题，或者如果我在开发时使用它会有什么好处？

一个例子对我更好地理解它非常有用。

我正在玩物质ui.我使用路由实现了LeftNav,但我找不到获取IconMenu的方法,或者菜单使用链接或路由.任何人都可以指点我一个好的来源/教程？文档不足,两个组件似乎都不像LeftNav那样支持'menuItems'作为属性.

我在我的项目中使用material-ui,并且我在一个黑色背景的div中有一个Checkbox.但它看起来不太好,因为Checkbox也是黑色的.如何将Checkbox的颜色从黑色更改为另一种颜色？

我是Material UI和ReactJS的新手.我一直在玩Create-React-App(CRA)和reactstrap.我的问题是,我可以一起使用Material UI和CRA来构建应用程序吗？

我正在尝试设置 Material UI Select 组件的宽度。为此，我必须为 FormControl 组件提供一个类，例如mw-120哪个链接到定义min-width120px的 CSS 类。

材质 UI 选择组件：

<FormControl className='mw-120'>
    <InputLabel htmlFor='selected-language'>Language</InputLabel>
    <Select value={this.state.selectedLanguage}
            onChange={(e) => this.onLanguageChange(e.target.value)}
            inputProps={{
                name: 'language',
                id: 'selected-language',
            }}>
        {menuItems}
    </Select>
</FormControl>

CSS类：

.mw-120 {
    min-width: 120px;
}

虽然我希望 Select 组件的大小现在最小宽度为 120 像素，但该组件在渲染后保持完全相同，如下图所示。换句话说，就是缩小。宽度不够大。宽度应大于标签Language。

Chrome 开发人员工具中的元素分析表明，该组件的主要 DIV 元素有一个.MuiFormControl-root-234包含的类min-width: 0;，并且它的位置/排名高于我的.mw-120类。我想这会覆盖我的.mw-120课程，对吗？有没有其他方法可以影响 Material UI Select 组件的宽度？Material UI Select 组件页面上没有影响此组件宽度的有用示例。

每当我向其中一个类添加模态时，都会出现此错误。

类型错误：无法读取未定义的属性“hasOwnProperty”

这是一个基本示例，我只是尝试始终显示基本模态。有任何想法吗？我已经尝试了各种应该可行的示例，但是我尝试过的任何事情都无法阻止错误发生。似乎如果我添加 Modal 那么它只是错误。

编辑：找出问题。模态需要一个单独的根级子级，您需要将所有内容嵌入其中。

import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Grid from '@material-ui/core/Grid';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import { withStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import { Schema, Field } from "v4f";
import Modal from '@material-ui/core/Modal';

const …

我有一个TextField连接到的元素react-hook-form。当我专注于该输入时，我会打开一个国家/地区列表，以便我可以选择一个国家/地区，通过 中的setValue函数将其电话代码填充到该字段中react-hook-form。

一切正常，国家/地区代码确实出现在字段中，但手动输入文本时通常向上移动的标签不会向上移动。

这是它的样子

我知道我必须使用 getRowId，但是我该如何使用它statId呢id？它是独一无二的。id或者为它们每个人生成一个属性？

错误：MUI：数据网格组件要求所有行都具有唯一的id属性。或者，您可以使用getRowIdprop 为每行指定一个自定义 id。rows 属性中提供了没有 id 的行：{"statId":813183,"teamId":3,"season":2021,"name":"Atlanta Hawks","team":"ATL","wins" ：41，“损失”：31，“fieldGoalsMade”：3492.1，“fieldGoalsAttempted”：7468.1，“fieldGoalsPercentage”：55.6，“twoPointersMade”：2427.9，“twoPointersAttempted”：4612.1，“twoPointersPercentage”：62.5，“ ThreePointersMade”：1064.2 ，“ ThreePointersAttempted”：2856，“ ThreePointersPercentage”：44.3，“ freeThrowsMade”：1684.8，“ freeThrowsAttempted”：2074.8，“ freeThrowsPercentage”：96.5，“进攻篮板”：903.6，“防守篮板”：3002.2，“篮板”：3905.9，“助攻”:2065.3、“抢断”:598.1、“封堵投篮”:405.4、“失误”:1086.7、“个人犯规”:1655.1、“得分”:9733.2、“双打”:120.1、“三双”:1.4}

import { useState, useEffect } from 'react';
import type { NextPage } from 'next';
import Container from '@mui/material/Container';
import Box from '@mui/material/Box';
import { DataGrid, GridColDef, GridRowIdGetter } from '@mui/x-data-grid';
import { Grid, Paper, Typography } from '@mui/material';
import Skeleton from '@mui/material/Skeleton';
import { blue } from '@mui/material/colors';

import FormOne from './../src/FormOne';
import …

因此，我将 Material UI Autocomplete 组件与 Next.js 一起使用，并收到此警告，我尝试解决但无法解决。错误来自 renderInput 函数吗？如果是这样，“...params”中没有“key”属性，所以我无法像警告消息建议的那样删除。

我该如何解决这个问题？

const top100Films = ['a', 'b', 'c', 'd'];

// props.tags = ['a', 'c']

<Autocomplete
  multiple
  id="tags-outlined"
  onChange={(event: any, newValue: string[]) => {
    props.onTagsChange(newValue);
  }}
  options={top100Films}
  value={props.tags}
  filterSelectedOptions
  renderInput={(params) => (
    <TextField
      {...params}
      label="Tags"
      placeholder="Tag"
    />
  )}
/>

hydration-error-info.js?32aa:26 Warning: A props object containing a "key" prop is being spread into JSX:
  let props = {key: someKey, tabIndex: ..., role: ..., id: ..., onMouseOver: ..., onClick: ..., onTouchStart: ..., data-option-index: ..., aria-disabled: …

在框外单击时我的框会关闭，这使我丢失了所有输入。我希望我的框仅在单击取消按钮时关闭。我不确定是什么让它在外面点击时关闭。有什么帮助吗？

我正在使用@material-ui/core

  _close() {
        DeviceCreationActions.close();
    }

render() {
        const actions = [
            <Button
                id="device-create-dialog-close"
                key="device-create-dialog-close"
                onClick={this._close}
            >
              {this.context.intl.formatMessage({id: 'Cancel'})}
            </Button>
        ];

        if (0 < this.state.stepIndex) {
            actions.push(<Button
                id="device-create-dialog-back"
                key="device-create-dialog-back"
                onClick={this._previousStep.bind(this)}
              >
                {this.context.intl.formatMessage({id: 'Back'})}
              </Button>
            );
        }

        if (
            (1 >= this.state.stepIndex && 0 < this.state['formStep' + this.state.stepIndex].length) ||
            (0 < this.state.stepIndex)
        ) {
            actions.push(<Button
                id="device-create-dialog-next"
                key="device-create-dialog-next"
                onClick={2 === this.state.stepIndex ? this._save.bind(this) : this._nextStep.bind(this)}
              >
                {this.context.intl.formatMessage({id: 2 === this.state.stepIndex ? 'Create' : 'Next'})}
              </Button>
            );
        }