标签: react-material

我最近开始使用 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}
                  /> ```

目前我正在使用 ReactJS 的 Material-UI 设置我的第一个项目。例如，因为我想使用自定义字体（托管在服务器上，而不是 Google 字体或类似字体）来自定义默认主题，所以我开始着手解决这个问题。

然而，虽然在构建过程中或在浏览器控制台中没有收到任何错误，但它只是不会加载。我已经尝试了 StackOverflow 和 Material-UI 存储库中提出的多种解决方案，但我无法让它工作，因此我不知道下一步该怎么做。

我已经尝试了 StackOverflow 上的其他线程、官方 Material-UI 文档和 Material-UI GitHub 存储库上的问题中建议的几种方法，但无济于事。我可能忽略了一些明显的东西，或者混淆了不同的概念，所以任何帮助都将不胜感激:)

主题定义：

import {createMuiTheme} from "@material-ui/core";

import Penna from "./../../assets/fonts/penna.otf";

const pennaFont = {
    fontFamily: 'Penna',
    fontStyle: 'normal',
    fontDisplay: 'swap',
    fontWeight: 400,
    src: `
    local('Penna'),
    url(${Penna})
  `,
}

const MUI_THEME = createMuiTheme({
    typegraphy: {
        fontFamily: ['Penna', "'Helvetica Neue'", 'Helvetica', 'Arial', 'sans-serif'].join(","),
        fontSize: "16px",
        fontWeightLight: "300",
        fontWeightRegular: "400",
        fontWeightMedium: "700",
    },
    overrides: {
        MuiCssBaseline: {
            '@global': {
                '@font-family': [pennaFont],
            },
        },
    }, …

Normally this is how you use Material-UI's Dialog. The code below is taken from Material-UI's docs

export default function AlertDialog() {
  const [open, setOpen] = React.useState(false);
  const handleClickOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  return (
    <div>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Open Dialog
      </Button>
      <Dialog open={open} onClose={handleClose}>
       {...}
      </Dialog>
    </div>
  );
}

But I want it to create the Dialog imperatively, sort of like fire and forget. I do not want to embed the Dialog …

我正在使用Material-UI进行UI设计。我正在使用集成了复选框的扩展面板。

请找到以下代码，

<ExpansionPanel 
    expanded={expanded === item.description} 
    onChange={this.handleChange(item.description)}
>
    <ExpansionPanelSummary expandIcon={<ExpandMoreIcon/>}>
        <Grid item xs={1}>
            <Checkbox
                value="checkedB"
                color="primary"
            />
        </Grid>
        <Grid item xs={2}>
            <Typography className={classes.heading}>
                {item.description}
            </Typography>
        </Grid>
        <Typography className={classes.desc}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Suspendisse malesuada lacus ex,
            sit amet blandit leo lobortis eget.
        </Typography>
    </ExpansionPanelSummary>
    <ExpansionPanelDetails>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Suspendisse malesuada lacus ex,
        sit amet blandit leo lobortis eget.
    </ExpansionPanelDetails>
</ExpansionPanel>

但是我面临一个问题，当我选中或取消选中复选框时，扩展面板会扩展或折叠。由于该复选框，我想避免在扩展面板上执行任何操作。我该如何实现？

提前致谢。

我正在构建一个 LTR 应用程序，我想添加 RTL 支持。该应用程序基于 Material UI React 之上。因为我使用的是 CSS Flex Box，所以我能够将应用程序旋转到 RTL，只需将 dir="rtl" 添加到主体即可。如上所述，我还在主题中添加了 direction="rtl"此处。

然而，并非一切都改变了。

让我们以此为例： 正如你在这里看到的，我在文本元素上留下了填充。在 RTL 版本中，由于所有内容都颠倒了，因此向左填充在 UI 中没有任何影响，我的意思是必须向右填充以显示两个元素之间的小空间：

似乎我做错了什么，因为在 Material UI 文档中 此处的，此功能在添加此代码段并将组件包裹在其周围后必须是开箱即用的。

这是我的父组件应用程序：

import React, { PureComponent } from "react";
import { theme } from "./styling/theme";
import Routes from "./Routes";
// Redux
import { Provider } from "react-redux";
import store from "./app/store";

import LoadingBar from "react-redux-loading-bar";
// CSS
import { MuiThemeProvider } from "@material-ui/core/styles";
// import { ThemeProvider } from "@material-ui/styles"; …

如何将路由器链接放在 reactjs 按钮中？

我在下面尝试了这两个：第一个更改颜色，而第二个更改颜色，我不喜欢它，因为它正在重新加载页面。

第一的

<Link to="/settings">
    <IconButton color="inherit">
        <SettingsIcon />
    </IconButton>
</Link>

第二

<IconButton color="inherit" href="/settings">
    <SettingsIcon />
 </IconButton>

我正在使用 React Material UI 组件。Typography 组件有 2 个 props，variant 和 component。这些 props 有什么区别。

我刚开始学习 React material-ui并且我发现了这个makeStyles函数，他们说它返回一个 Hook。

我记得在 React hooks 中，自定义钩子是通过包装一个内置钩子来制作的。我尝试查看内部makeStyles，它具有一些互操作性和一些 css-in-javascript 模式。

我真的厌倦了一遍又一遍的规则。现在有人可以告诉我这个makeStyle函数是什么，也许可以建议一个更好的方法来阅读材料用户界面。

感谢 Stack Overflow 的好人。

我们正在使用OutlinedInputMaterial UI，但未呈现文本标签。如何解决这个问题？

import { Grid, OutlinedInput } from '@material-ui/core';

import { Grid, OutlinedInput } from '@material-ui/core';

而不是预期的“不可见标签”文本，而是呈现一个空白区域（左上角）：

尝试在网格表中打开 popper 时观察到错误。错误详情

Material-UI：anchorEl提供给组件的prop 无效。锚元素应该是文档布局的一部分。确保该元素存在于文档中或不显示 none。

下面是我在网格表中使用的示例代码：

<>
    <MoreVertIcon
    ref={anchorRef}
    aria-controls={open ? 'menu-list-grow' : undefined}
    aria-haspopup="true"
 // key={uuidv4()}
    onClick={handleToggle}
    style={{ color: theme.palette.primary.main }}
    />
    <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal>
        hello world
    </Popper>
</>

找到了一个参考，但不确定我在哪里打破了这个规范。任何帮助表示赞赏。