标签: material-ui

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

我想在 Material-UI Paper 组件中垂直对齐一些文本。

代码在这里：https : //codesandbox.io/embed/material-demo-fz9wj

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles(theme => ({
  root: {
    padding: theme.spacing(3, 2),
    height: 200,
    verticalAlign: 'middle'
  },
}));

function PaperSheet() {
  const classes = useStyles();

  return (
    <div>
      <Paper className={classes.root}>
        <Typography variant="h5" component="h3">
          This is a sheet of paper.
        </Typography>
        <Typography component="p">
          Paper can be used to build surface or other elements for your application. …

寻找一种方法，使 material-ui 的工具提示仅在文本被省略号（溢出）截断时才展开表格单元格中的文本。

目前在我的表中，我有一个这样的单元格：

<TableCell className={classes.descriptionCell}>{row.description}</TableCell>

我的 descriptionCell 样式是这样的：

    descriptionCell: {
        whiteSpace: 'nowrap',
        maxWidth: '200px',
        overflow: 'hidden',
        textOverflow: 'ellipsis'
    }

这使得文本在这个表格中表现得像我希望的那样，但我希望能够悬停并在工具提示中查看它的其余部分，最好是 Material-UI 的内置工具提示组件。

我知道这里有一个包https://www.npmjs.com/package/react-ellipsis-with-tooltip应该这样做，但它使用引导工具提示，而不是材料 UI。

您好我想测试与材料的UI创建一个Slider组件，但我不能让我的测试通过。我想使用fireEventwith测试值的变化@testing-library/react。我一直在关注这篇文章以正确查询 DOM，但我无法获得正确的 DOM 节点。

提前致谢。

<Slider /> 成分

// @format
// @flow

import * as React from "react";
import styled from "styled-components";
import { Slider as MaterialUISlider } from "@material-ui/core";
import { withStyles, makeStyles } from "@material-ui/core/styles";
import { priceRange } from "../../../domain/Search/PriceRange/priceRange";

const Wrapper = styled.div`
  width: 93%;
  display: inline-block;
  margin-left: 0.5em;
  margin-right: 0.5em;
  margin-bottom: 0.5em;
`;

// ommited code pertaining props and styles for simplicity

function Slider(props: SliderProps) {
  const initialState = …

我们想更改 Material-ui 自动完成组件上的文本颜色、轮廓和填充。

代码如下所示：

              <FormControlLabel
                label="Please enter desired service:"
                labelPlacement="start"
                control={
                  <Autocomplete
                    id="services"
                    options={props.serviceTypes}
                    getOptionLabel={option => option.name}
                    className={classes.inputRoot}
                    style={{ width: 400, paddingLeft: 20 }}
                    renderInput={params => (
                      <TextField
                        {...params}
                        label=""
                        className={classes.inputRoot}
                        variant="outlined"
                        fullWidth
                      />
                    )}
                    onChange={setService}
                  />
                }
              />

我们可以通过这样的代码更改 TextInput 颜色

                        InputProps={{
                          className: classes.inputColor
                        }}

但是以这种方式应用样式会影响 AutoComplete 功能（它失去了自动完成功能并且表现得像一个普通的 TextField）。

我们尝试了许多 style 和 className 选项都无济于事。

感谢任何建议。

在使用 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 之后，我仍然收到这些错误