标签: 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 Design React，但我刚刚发现 data-someField 确实将值传播到数据集映射。

例子：

<Input data-role=‘someValue’  onChange={this.onChange} />

onChange = e =>{
           const role = e.target.dataset.role
            const role2 = e.currentTarget.dataset.role
}

onChange 处理程序中的两个角色都未定义。如果我将 Input 标签更改为常规 html 输入，则不会发生这种情况。

任何想法为什么 Material Design 不允许数据属性或是否有任何解决方法？

先感谢您！

--- 在@Springer 建议之后，我尝试使用 inputprops，但注意到只有 name 属性可用，其余的未定义。

```  <Input
                    value={role.name}
                    disabled={!this.state.editMode}
                    inputProps={{
                      name: 'MyName',
                      role: 'MyRole',

                      dataset: {
                        degree: 'Teniente'
                      },

                      data: {
                        roleId: role.uuid
                      },
                      dataRoleId: {
                        roleId: role.uuid
                      }
                    }}
                    disableUnderline={true}
                    data-role-id={role.uuid}
                    role={role}
                    onChange={this.onChangeExistingRole}
                  /> ```

我试图在选择时更改行文本的颜色和行的背景颜色。

我能够成功更改背景颜色，但无法更改文本颜色。

<TableRow
        className={classes.tableBody}
      >

tableBody: {
    "&:focus": {
      color: "yellow !important",
      backgroundColor: "#3D85D2 !important",
    },
  },

我正在尝试将我的一些 React 组件从 Material UI迁移到新的makeStyles/ useStyleshook API。如果我理解正确classes，只要我将道具传递给，我就可以继续接受来自父组件的道具useStyles：

const MyComponent = (props: Props) => {
  const { myProp } = props;
  const classes = useStyles(props);

我想知道Props在这种情况下如何声明我的类型。HOC API 的等价物是：

const styles = createStyles({
  a: {},
  b: {}
});

interface Props extends WithStyles<typeof styles> {
  myProp: string;
}

这是一些有效但看起来有点冗长的东西：

const styles = createStyles({
  a: {},
  b: {}
});

interface Props extends StyledComponentProps<ClassKeyOfStyles<typeof styles>> {
  myProp: string;
}

const useStyles = makeStyles(styles);

有没有更好的办法？理想情况下，不需要createStyles和使用 …

所以我对 node.js / react / material-ui 还很陌生。我一直在按照指南尝试建立一个网站，并且进展顺利。我决定为时髦的组件（不是指南的一部分）包含 material-ui，然后卡住了，因为在使用主题 ui 时我似乎无法触发自定义函数。

使用下面的代码，如果我放弃“类”道具，我可以创建一切正常。我可以添加我的功能，一切正常。但如果我这样做，我显然会失去所有的造型。

const styles = theme => ({
    // Styling - omitted
});

const Login = (props) => {

    const {classes} = props;

    return(
        <div>
            <Paper className={classes.root}>
                <form className={classes.container} noValidate autoComplete="off">
                    <TextField
                        id="email"
                        label="Email"
                        className={classes.textField}
                        InputProps={{
                            className: classes.input
                        }}
                        type="email"
                        name="email"
                        autoComplete="email"
                        margin="normal"
                        variant="outlined"
                        required
                        autoFocus
                    />
                    <TextField
                        id="outlined"
                        label="Password"
                        className={classes.textField}
                        InputProps={{
                            className: classes.input
                        }}
                        type="password"
                        autoComplete="current-password"
                        margin="normal"
                        variant="outlined"
                        required
                    />
                    <Typography className={classes.divider} />
                    <Button
                        type="submit"
                        variant="contained"
                        color="inherit"
                        className={classes.button}
                    >
                        Login …

通常，当我们使用 popover 时，我们将鼠标事件期间的锚点设置为event.currentTarget。

然而，这在某些情况下是不可能的，而在其他情况下是不受欢迎的。- 如何直接设置弹出框锚元素？

import React from "react";
import Popover from "@material-ui/core/Popover";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";

export default function SimplePopover() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  function handleClick(event) {
    //setAnchorEl(event.currentTarget);
    setAnchorEl(); //How to refer to the div?
  }

  function handleClose() {
    setAnchorEl(null);
  }

  const open = Boolean(anchorEl);
  const id = open ? "simple-popover" : undefined;

  return (
    <div>
      <Typography>Anchor point of popover here</Typography>
      <Button aria-describedby={id} variant="contained" onClick={handleClick}>
        Open Popover
      </Button>
      <Popover
        id={id}
        open={open} …

我在这里使用select 组件的精确标记

        <FormControl
            variant="outlined"
            className={classes.formControl}
            error={errors.title ? true : false}
          >
            <InputLabel htmlFor="title">Who are you?</InputLabel>
            <Select
              labelId="titleLabel"
              id="title"
              value={state.title ? state.title : 'Example1'}
              onChange={handleChange}
              label="Who are you?"
            >
              <MenuItem value={`Example1`}>Example1</MenuItem>
              <MenuItem value={`Example2`}>Example2</MenuItem>
              <MenuItem value={`Example3`}>Example3</MenuItem>
              <MenuItem value={`other`}>other</MenuItem>
            </Select>
            {errors.title && <FormHelperText>{errors.title}</FormHelperText>}
          </FormControl>

然后我不断收到以下错误，不知道如何解决这个问题

index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely …

我有一个使用 MUI 的 React 应用程序，现在我已经使用微调器实现了悬念，它在加载内容时作为后备组件启动。我很想为回退组件添加淡入/淡出过渡，因为目前这种变化太突然了。

我的设置（对于这个特定问题的相关部分）如下：

依赖关系

    "@glidejs/glide": "^3.4.1",
    "@material-ui/core": "4.8.3",
    "@material-ui/icons": "4.5.1",
    "@material-ui/lab": "4.0.0-alpha.39",
    "@material-ui/pickers": "3.2.10",
    "@types/autosuggest-highlight": "^3.1.0",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-redux": "^7.1.7",
    "autosuggest-highlight": "^3.1.1",
    "connected-react-router": "^6.8.0",
    "history": "^4.10.1",
    "node-sass": "^4.13.0",
    "react": "^16.12.0",
    "react-date-picker": "^8.0.0",
    "react-dom": "^16.12.0",
    "react-feather": "^2.0.3",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "redux-devtools-extension": "^2.13.8",
    "redux-ducks-ts": "^1.0.9",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.1.3",
    "reselect": "^4.0.0",
    "styled-components": "^4.4.1",
    "typescript": "~3.7.2"

路由器块

这是应用程序的主要路由器，它有一个RouteWithSubRoutes组件接收路由作为参数并渲染react-render-dom路由组件，但基本上充当路由器切换容器

import React, { FC, Suspense } from "react";
import …

我试图摆脱主题中存在的最大宽度。
这是我在 Chrome 中看到的（如果我取消选中它，它会做我需要的）：

@media (min-width: 1280px)
.MuiContainer-maxWidthLg {
    max-width: 1280px;
}

我怎样才能做到这一点？我试过这样的事情：

const useStyles = makeStyles(theme => ({
    root: {       
        '& .MuiContainer-maxWidthLg' : {
             maxWidth: //No matter what I put here, it does not work
        }, 

但它似乎没有任何效果......我该如何覆盖它？

谢谢，

亚历克斯