小编kei*_*kai的帖子

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

类型错误：无法读取未定义的属性“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 …

我正在使用 ToolTip 组件，我有两个标题文本，只是想知道是否可以将它们呈现为两行（每种语言在一行中）而不是一行？如何将预期的样式应用到该组件？

这是代码：

renderToolTip = tipText => {
    const { classes } = this.props;
    if (tipText) {
      return (
        <Tooltip
          title={tipText}
          placement="left"
          classes={{
            tooltip: classes.tooltip,
          }}>
          <IconButton>
            <InfoOutlined />
          </IconButton>
        </Tooltip>
      );
    }
    return null;
  };

languageList = ['English', 'Spanish']
languageList.map(language => this.renderToolTip(language));

预期：每个文本换行，有人可以帮忙吗？

这是 cra 的全新安装，在节点 13.11.0 上运行打字稿模板，尝试运行 npm start 时出现错误

TypeScript error in D:/Projects/personal-site/node_modules/@types/testing-library__react/node_modules/pretty-format/build/index.d.ts(7,13):
'=' expected.  TS1005

     5 |  * LICENSE file in the root directory of this source tree.
     6 |  */
  >  7 | import type * as PrettyFormat from './types';
       |             ^
     8 | /**
     9 |  * Returns a presentation string of your `val` object
    10 |  * @param val any potential JavaScript object```

我的 React 应用程序成功显示按钮，但收到此错误。

index.js:1const uuidv4 = require('uuid/v4');从 uuid@7.x 开始，不推荐使用深度要求喜欢。使用 Node.js CommonJS 模块时需要顶层模块，浏览器绑定时请使用 ECMAScript 模块

import React, { Component } from 'react';
import { Container, ListGroup, ListGroupItem, Button } from 'reactstrap';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import uuid from 'uuid/v4';

class ShoppingList extends Component {
    state = {
        items: [
            { id: uuid(), name: 'Eggs' },
            { id: uuid(), name: 'Milk' },
            { id: uuid(), name: 'Steak' },
            { id: uuid(), name: 'Water' },
        ]
    }

    render() …

我是 Material UI 的新手，我的目标是在每个文本字段之间留出空格，我已经留出了空格，但它不起作用。谁能帮助我在文本字段之间留出空间？

这是代码：

import React from "react";
import Grid from "@material-ui/core/Grid";
import { makeStyles, withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const styles = theme => ({
  root: {
    "& > *": {
      margin: theme.spacing(1),
      width: "25ch"
    }
  }
});

class TextFields extends React.Component {
  render() {
    const { classes } = this.props;
    return (
      <Grid>
        <form className={classes.root} noValidate autoComplete="off">
          <Grid item spacing={3}>
            <TextField label="First Name" variant="outlined" />
          </Grid>
          <Grid item spacing={3}>
            <TextField label="Last Name" variant="outlined" /> …

Google BigQuery 中如何发生此错误“查询执行期间超出资源：没有足够的资源用于查询规划 - 子查询太多或查询太复杂”

我正在查看 MaterialUI 提供的这个自动完成示例

https://codesandbox.io/s/81qc1

我想知道如果未找到结果，如何显示“未找到选项”消息。

我有两种风格。

一件事包含在特定组件中，另一件事包含在全局组件中。

例如，假设我们有以下树。

index.tsx
-App.tsx
-globalConstants.ts

在 globalConstants.ts

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

export const sharedStyles = makeStyles((theme: Theme) =>
  createStyles({
    .
    .
    .
  }),
);

在 App.tsx

import React from 'react';
import { Theme, makeStyles, createStyles } from '@material-ui/core/styles';
import { sharedStyles } from '../constants/globalConstants'

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    .
    .
    .
  }),
);

我的问题是我不能将 useStyles 和 sharedStyles 组合成一个类变量。

当然，我可以像下面这样使用它

export default function NavBar() {
  const classes = useStyles();
  const sharedClasses = sharedStyles(); …

const useStyles = makeStyles(theme => ({
  wrapper: {
    width: "300px"
  },
  text: {
    width: "100%"
  },
  button: {
    width: "100%",
    marginTop: theme.spacing(1)
  },
  select: {
    width: "100%",
    marginTop: theme.spacing(1)
  }
}));

有没有办法在上述变量中​​使用 CSS @media？

如果不可能，我怎样才能使我的自定义 css 响应？

我有一个 material-ui 自动完成元素

<Autocomplete
  id="combo-box-demo"
  autoHighlight
  openOnFocus
  autoComplete
  options={this.state.products}
  getOptionLabel={option => option.productName}
  style={{ width: 300 }}
  onChange={this.selectProduct}
  renderInput={params => (
    <TextField {...params} label="Select Product Name" variant="outlined" />
  )}
/>;

当我单击按钮时，我希望该元素获得焦点。

我尝试使用这里描述的引用如何以编程方式聚焦输入

它适用于其他元素但不适用于自动完成

请帮忙