标签: material-ui

Material UI 文档具有以下选项卡和选项卡组件的示例：

<Tabs value={value} onChange={this.handleChange}>
    <Tab label="Item One" />
    <Tab label="Item Two" />
    <Tab label="Item Three" href="#basic-tabs" />
</Tabs>

我想创建自己的组件，该组件又创建选项卡（这样我就可以使用 对其进行样式设置withStyles）。所以我将代码修改为：

<Tabs value={value} onChange={this.handleChange}>
    {["one", "two", "three"].map(label => <MyTab label={label} />)}
</Tabs>

function MyTab({ label }) {
    return <Tab label={label} />;
}

然而，这似乎打破了选项卡和选项卡之间的联系。Tabs onChange 事件不再触发。向选项卡添加value属性没有帮助。

我在这里做错了什么？是否不可能将 Tab 包裹在另一个组件中？如果是这样，我应该如何设计选项卡的样式？

这是完整的代码：

• 原始文档示例
• 我的修改

我试图在使用 Material ui v1 的 React 应用程序中使用默认主题，这有点奇怪。有些项目的默认主题会加载得很好，但在其他项目上却不会。

到目前为止我已经得到了这个：

import {withStyles} from '@material-ui/core/styles';

const styles = theme = ({
    paper: {

    }
});

class Topbar extends Component {
    render() {
        const {classes} = this.props;

        return (
            <Paper className={classes.paper}>
        )
    }
}

export default withStyles(styles)(Topbar);

当它运行时，它会抛出一个错误： 'theme' is not defined no-undef

让我感到困惑的是，我在另一个项目中拥有几乎完全相同的东西，并且该项目运行得非常好。我不确定我错过了什么，而且在这件事上没有太多支持。

任何帮助表示赞赏！

我想在TableCell内部实现Google 的 Material UI 菜单项，如他们的文档所示，如下所示：

这是我目前的方法：

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import {
  Grid,
  IconButton,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
  Paper,
  Menu,
  MenuItem,
  Button,
} from '@material-ui/core';
import { ExpandLess, ExpandMore } from '@material-ui/icons';

const styles = theme => ({});

const Questions = ({ data, classes, openMenu, anchorEls, handleClose }) => {
  const CustomTableCell = withStyles(theme => ({
    head: {
      backgroundColor: theme.palette.common.black,
      color: theme.palette.common.white,
    }, …

我正在创建一个动态界面，用户可以在其中添加和删除动态数量的项目。有一个添加按钮，每个项目都有一个删除按钮。我将每个项目都包含在 a 中Zoom以给它一些动画。添加新项目时，这种方法效果很好。当我删除该项目时，我遇到了问题，因为它会从 DOM 中取消渲染该项目，并且动画会丢失。是否有一种关于转换的回调，我可以使用它来更新包含动画后的项目的数组？或者可能有更好的解决方案？

我概述了实现这一目标的两种可能的尝试，但两者都存在问题。第一次尝试让我的项目在被删除时没有动画，第二次尝试让我在它们曾经存在的地方留下了间隙（注意：网格是我设计中所需的组件）

代码沙箱：https://codesandbox.io/s/l2lly078kq

import React from "react";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import Zoom from "@material-ui/core/Zoom/Zoom";

let itemCount = 0;

export default class extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      items: [],
      items2: [],
      hiddenItems: []
    };
  }

  handleAddItem = () => {
    let items = this.state.items;
    items.push(`Item ${itemCount++}`);
    this.setState({ items });
  };

  handleDeleteItem = index => {
    let items …

   <Popover
       key={element.name}
       className={classes.popover}
       classes={{
         paper: classes.paper
       }}
       open={open}
       anchorEl={this.myRef.current}
       anchorOrigin={{
         vertical: 'bottom',
         horizontal: 'left'
       }}
       transformOrigin={{
         vertical: 'top',
         horizontal: 'left'
       }}
       disableRestoreFocus
       hideBackdrop
    >

我有这种弹出窗口，我想执行onMouseLeave事件，但它不起作用。我该如何解决它？发生这种情况是因为我认为该元素中没有其他 html 元素，这就是它不发出任何操作的原因。也许存在解决这个问题的方法？

这是文档上的链接 - https://material-ui.com/utils/popover/

我正在创建一个带有固定表头和复选框的可滚动表。在没有复选框的情况下，表格工作正常（表格头部和主体没有重叠）。使用复选框，所有行都可以很好地滚动，除了表体中的复选框将与表头中的复选框重叠（或显示）。

我尝试将背景设置为白色，但不起作用。

问题演示： https: //codesandbox.io/s/vm6l0p1vly

      <div
        style={{
          height: "500px",
          width: "100%",
          overflow: "auto",
          borderStyle: "solid",
          borderWidth: 1,
          borderColor: "lightGray"
        }}
      >
        <Table>
          <TableHead>
            <TableRow>
              <TableCell
                padding="checkbox"
                style={{ position: "sticky", top: 0, backgroundColor: "white" }}
              >
                <Checkbox />
              </TableCell>
              <TableCell
                style={{ position: "sticky", top: 0, backgroundColor: "white" }}
              >
                id
              </TableCell>
              <TableCell
                style={{ position: "sticky", top: 0, backgroundColor: "white" }}
              >
                name
              </TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {data.map(row => (
              <TableRow key={row.id} hover>
                <TableCell padding="checkbox">
                  <Checkbox />
                </TableCell>
                <TableCell>{row.id}</TableCell>
                <TableCell>{row.name}</TableCell>
              </TableRow> …

假设我有一个简单的代码，例如：

<ListItem
  button={true}
>
  <Typography variant='caption' color='primary'>
            {value}
  </Typography>
  <Button
    onClick={foo}
  >
    Button
  </Button>
</ListItem>

当我单击 ListItem 内的任何内容时，会触发连锁反应，这是可以的，但是当我单击按钮时，我不希望触发父组件的连锁反应。我怎么做？

使用 Material-UI (mui) 将 ReactJS 项目从 v3 升级到 v4，并遵循推荐的迁移指南。作为其中的一部分，将material-ui-pickers 2.2.1 替换为@material-ui/pickers。

DatePicker 组件现在抱怨不存在的“mask”属性，该属性过去在 mui3 上运行良好。

迁移指南没有提及 Pickers。所以我想知道。现在我回滚到使用 mui 3.9 和material-ui-pickers 2.2.1。

import { DatePicker, DateTimePicker } from '@material-ui/pickers';

// later on...

return (
    <DatePicker
      name={name}
      value={value}
      clearable
      autoOk
      onChange={handleChange}
      format="DD/MM/YYYY"
      placeholder="___/___/______"
      mask={masked(value)}         // <=== The mask property
      {...other}
    />
  );

预期的行为是 DatePicker 应该像 mui v3 中一样工作，因为迁移指南中没有提到任何内容。

实际情况是组件的 mask 属性不再存在。

我是 React JS 的新手。我有多个图标按钮。OnClick 我只想让单击的按钮更改其颜色。我使用了状态，但是当状态改变时，所有按钮的颜色都会改变。我应该采用什么方法？有没有一种方法可以在不使用状态的情况下改变颜色？需要钥匙或身份证吗？我提供的代码已被裁剪（意味着它仅包含我认为相关的部分）。

class Utilitybar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      bgColor: "default"
    };
  }
  render() {
    return (
      <div>
        <IconButton color={
          this.state.bgColor
        }
          onClick={
            () => {
              this.props.vidToggle();
              if (this.state.bgColor === "default") {
                this.setState({ bgColor: "primary" })
              } else {
                this.setState({ bgColor: "default" })
              }
            }
          }>
          <FaPlayCircle />
        </IconButton>
        <IconButton color={
          this.state.bgColor
        }
          onClick={
            () => {
              this.props.fileToggle();
              if (this.state.bgColor === "default") {
                this.setState({ bgColor: "primary" })
              } else {
                this.setState({ bgColor: "default" …

是否可以使此沙箱（https://codesandbox.io/s/material-demo-w385h）中的 Material-UI 图标装饰仅在用户选择文本字段时可见？

代码：

<TextField
  className={classes.margin}
  id="input-with-icon-textfield"
  label="TextField"
  InputProps={{
    startAdornment: (
      <InputAdornment position="start">
        <AccountCircle />
      </InputAdornment>
    )
  }}
/>

我希望有一个使用 Material-UI 道具的干净解决方案。