标签: material-ui

我正在使用库中的Table组件。 出于某种原因，包括标题在内的每一行都有一个填充、顶部和底部，我无法覆盖。 我已经尝试更改所有底层组件的样式，但没有成功。这是代码：reactmaterial-ui
24px

<Table>
    <TableHeader adjustForCheckbox={false} displaySelectAll={false} fixedHeader={true}>
        <TableRow>
            <TableHeaderColumn>id</TableHeaderColumn>
            <TableHeaderColumn>name</TableHeaderColumn>
            <TableHeaderColumn>number</TableHeaderColumn>
        </TableRow>
    </TableHeader>
    <TableBody showRowHover={true} displayRowCheckbox={false}>
        {data.map(item => {
            return (
                <TableRow key={item.id}>
                    <TableRowColumn>{item.id}</TableRowColumn>
                    <TableRowColumn>{item.name}</TableRowColumn>
                    <TableRowColumn>{item.number}</TableRowColumn>
                </TableRow>
            );
        })}
    </TableBody>
</Table>

知道需要如何更改哪个组件的样式才能覆盖此样式吗？

我想创建具有选择属性但也能够在其中编写自定义文本的输入元素。我正在使用 React 和 Material-UI。

是否可以在 Material-UI 的 TextField 组件内（在输入下方的 div 内）添加元素。

目前：Usluga grupni Pos ....

添加元素：

<div class="MuiFormControl-root-142 ...>
  <label class="MuiFormLabel-root-151 ...>Usluga</label>
  <div class="MuiInput-root-156 ...>
    <input aria-invalid="false" ... list="services" value="">
    <datalist id="services">
      <li tabindex="-1" ...>grupni<span class="MuiTouchRipple-root-82"></span> 
      </li>
      <li tabindex="-1" ...>Pos<span class="MuiTouchRipple-root-82"></span>
      </li>
    ....
  </div>
</div>

目前反应：

<TextField
  id="service"
  label="Usluga"
  className={classes.textField}
  margin="normal"
  onChange={handleChange}
  inputProps={{
   list: "services"
  }}
/>
<datalist id="services">
 {
   services.map(option => (
     <MenuItem key={option.id} value={option.service}>
      { option.service }
     </MenuItem>
    ))
 }
</datalist>

如果这是不可能的，还有什么方法可以做到这一点？

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 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 说明直接导入它们来使用 material-ui 图标。

但我有一个文本标签，它是实际的图标名称（如calendar_view_day），需要从中动态获取和呈现图标组件。

我怎么能这样：

render() {
  return (
    <Icon name="calendar_view_day" color="primary" />
  )
}

代替：

render() {
  return (
    <CalendarViewDay color="primary" />  // Imported by name
  )
}

寻找一种方法，使 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。

我正在尝试使用 react-hook-form 库来验证表单。当我使用 ant design 或 material UI 渲染视图时，它无法正常工作。

<Input name="firstName" ref={register({ required: true })} />
  {errors.firstName && 'First name is required'}

发生了一些警告："Missing name at.....".

您好我想测试与材料的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 选项都无济于事。

感谢任何建议。