标签: material-ui

我希望在 React 中使用 Material UI 制作多个滚动列。我有一种在引导程序中使用 flex 进行的方法，但我无法将其翻译过来。我已经整理了一个 hacky 方法的演示，它需要知道您要滚动的内容的大小（在本例中为 AppBar）

https://codesandbox.io/s/pmly895mm

html,
body {
  margin: 0;
  height: 100%;
}

#root {
  height: 100%;
}

.grid-container {
  height: calc(100% - 64px);
}

.grid-column {
  height: 100%;
  overflow-y: auto;
}

在这个演示中，我将所有的高度设置为 100%（html、body、#root），然后创建了两个grid-container高度为 100% 的类 - AppBar 高度和grid-column高度为 100% 并且溢出-y 为 auto。

在 Bootstrap 中，我会将这些类分别应用于row和column元素

.flex-section {
  flex-grow: 1;

  display: flex;
  flex-direction: column;

  min-height: 0;
}

.flex-col-scroll {
  flex-grow: 1;

  overflow: auto;

  min-height: 100%; …

在这个https://material-ui.com/utils/popover/#mouse-over-interaction 的例子中material-ui

对于示例https://material-ui.com/utils/popover/#mouse-over-interaction，请按照以下步骤操作 material-ui

1. 在上面的示例中，将鼠标保持在文本上Hover with a Popover. --- 您会看到popover

2. 尝试将鼠标移到popover---附近popover消失，对吗？但即使我悬停在上面，我也想显示弹出框 popover

并使只有酥料饼的消失，如果用户未悬停在任popover或Hover with a Popover.（基本上anchorEl）

我正在从他们的演示中复制代码

  import React from 'react';
    import PropTypes from 'prop-types';
    import Popover from '@material-ui/core/Popover';
    import Typography from '@material-ui/core/Typography';
    import { withStyles } from '@material-ui/core/styles';

    const styles = theme => ({
      popover: {
        pointerEvents: 'none',
      },
      paper: {
        padding: theme.spacing.unit,
      },
    });

    class MouseOverPopover extends React.Component {
      state = {
        anchorEl: …

Material ui 在 List 和 ListItem 上添加默认填充如何删除它？对资源的任何帮助或方向将不胜感激。

也许不是正确的方法，但我想为标题创建一些“全局”样式。像这样的东西：

const myTheme = createMuiTheme({
    headings: {
        h1: {
            fontSize: 28,
            // Obviously this does not work...
            [theme.breakpoints.down('sm')]: {
                fontSize: 24
            },
        },
        h2: {
            fontSize: 24,
        }
    }
}

然后我可以像这样在我的组件中使用它们：

const styles = (theme) => ({
    myElement: {
        ...theme.headings.h1,
        // ... other styles
    }
}

这确实有效，但我面临的问题是我希望标题具有响应性并尊重 Material UI 的断点，但我不能在 createMuiTheme 本身中使用它们？有什么方法可以正确执行此操作，以便我可以将所有样式都包含在响应式样式中？

在使用 Material UI 中的选择时，我正在努力让它们正常工作，使用高度和宽度适当地使用“vh”和“vw”以及使用“vh”的文本大小。

我最终获得了合适的框大小，但由于显然使用“变换”从左上角偏移自身，因此标签文本不再居中。

无论如何，这就是我所拥有的：https : //codesandbox.io/s/material-demo-ujz2g

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormHelperText from "@material-ui/core/FormHelperText";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    width: "20vw"
  },
  selectEmpty: {
    marginTop: theme.spacing(2)
  },
  select: {
    height: "10vh"
  },
  inputLabel: {
    fontSize: "4vh",
    alignSelf: "center"
  }
}));

export default function SimpleSelect() {
  const classes = useStyles();
  const …

我原来的代码是这样的：

handleClick() {
  var name = this.refs.name.value;
  var description = this.refs.description.value
}
render () {
return (
  <React.Fragment>
    <input ref='name' placeholder='Enter the name of the item' />
    <input ref='description' placeholder='Enter a description' />
    <Button onClick={this.handleClick.bind(this)}>Submit</Button>
  </React.Fragment>
);}

name并且description可以正确获取输入。但是当我使用<TextField>：

<TextField ref='name' placeholder='Enter the name of the item' />

它显示传递的值是null，似乎ref不起作用。谁能帮我解决这个问题？

当我在浏览器上运行我的项目时出现以下错误：

编译失败：

./node_modules/@material-ui/lab/esm/internal/svg-icons/Close.js
Attempted import error: 'createSvgIcon' is not exported from '@material-ui/core/utils'.

我正在尝试实现自动完成组件（来自“多个值”部分中的示例）。

这是我正在使用的代码：

import React from 'react';
import Chip from '@material-ui/core/Chip';
import Autocomplete from '@material-ui/lab/Autocomplete';
import TextField from '@material-ui/core/TextField';

<Autocomplete
        multiple
        id="tags-standard"
        options={top100Films}
        getOptionLabel={(option) => option.title}
        defaultValue={[top100Films[13]]}
        renderInput={(params) => (
          <TextField
            {...params}
            variant="standard"
            label="Multiple values"
            placeholder="Favorites"
          />
        )}
      />

我尝试通过 NPM 安装 SVG Icons：

npm install @material-ui/icons

然后将它们导入我的 TypeScript：

import createSvgIcon from '@material-ui/icons/utils/createSvgIcon';

但我仍然有上面的错误。我该如何解决这个问题？

错误：Material-UI：数据网格组件要求所有行都具有唯一的 id 属性。当我调用表格时，我在行道具中没有提供一行是我所看到的。

这是我定义表的方式。

const columns = [
  { field: "_id", hide: true },
  { field: "user", headerName: "User", width: 70 },
  { field: "fromaddress", headerName: "Sender", width: 70 },
  { field: "dkimSpfChk", headerName: "DKIM/SPF", width: 70 },
  { field: "replySenderMismatch", headerName: "Reply MisMatch", width: 70 },
  { field: "riskywordchk", headerName: "Risky Word", width: 70 },
  { field: "domainagechk", headerName: "Sender Domain Age", width: 70 },
  { field: "attachmentChk", headerName: "Attachments", width: 70 },
  { field: "riskyLinkAge", headerName: "Body Link …

无法解析“@material-ui/lab/AdapterDateFns”

无法解析“@material-ui/lab/DateTimePicker”

无法解析“@material-ui/lab/LocalizationProvider”

即使在安装了@material-ui/lab 之后，我仍然收到这些错误

我在Material-UI无头useAutoComplete钩子的帮助下在 React.js 中创建了一个自动完成组件。该组件工作正常。当用户尝试输入任何字符时，Listbox将自动打开。

但问题是当用户选择任何东西并注意输入元素时，ListBox重新打开。我怎样才能防止这种情况？

代码沙盒：

代码：

import React from 'react';
import useAutocomplete from '@material-ui/lab/useAutocomplete';

function AutocompleteComponent(props) {
  const { data } = props;

  const [value, setValue] = React.useState('');
  const [isOpen, setIsOpen] = React.useState(false);

  const handleOpen = function () {
    if (value.length > 0) {
      setIsOpen(true);
    }
  };

  const handleInputChange = function (event, newInputValue) {
    setValue(newInputValue);
    if (newInputValue.length > 0) {
      setIsOpen(true);
    } else {
      setIsOpen(false);
    }
  };

  const {
    getRootProps,
    getInputProps,
    getListboxProps, …