标签: material-ui

我正在尝试处理一个表头中应该有 2 行的表。第一个标题中的每个单元格都应该在第二行（在 header 中）有子单元格。到目前为止，我的设计并未清楚地显示每列的数据。我需要为每列绘制左边框。我不知道该怎么做。

这是我的代码（CodeSandBox）

const useStyles = makeStyles({
  table: {
    minWidth: 650
  }
});

<TableContainer component={Paper}>
  <Table className={classes.table} aria-label="simple table">
    <TableHead>
      <TableRow>
        <TableCell align="center" colSpan={5}>
          MRF
        </TableCell>
        <TableCell align="center" colSpan={1}>
          AD
        </TableCell>
        {/* <TableCell align="center" colSpan={4}>Incinerator</TableCell>
        <TableCell align="center" colSpan={4}>Landfill</TableCell>
        <TableCell align="center" colSpan={4}>Market</TableCell> */}
      </TableRow>
      <TableRow>
        <TableCell>Paper</TableCell>
        <TableCell align="right">Plastic</TableCell>
        <TableCell align="right">Glass</TableCell>
        <TableCell align="right">Metals</TableCell>
        <TableCell align="right">Metals</TableCell>
        <TableCell align="right">Food</TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      <TableRow>
        <TableCell colSpan={2}>Data Two Columns</TableCell>
      </TableRow>
    </TableBody>
  </Table>
</TableContainer>

预期结果：结果

我需要获取所选页面的编号，以便向用户显示某些数据。我有这个分页元素：

<Pagination count={5} variant="outlined" shape="rounded" onChange={handlePagination} />

它看起来像这样：

所以我添加了带有函数“handlepagination”的 onChange 操作，如下所示：

function handlePagination (event) {
console.log(event.currentTarget)
}

例如，当我单击 4 号按钮时，我得到以下输出：

谁能帮我获取页码，在本例中为“4”字符串？我尝试了 event.currentTarget.value 但这不起作用......

我正在尝试在表格组件的每一行之间创建空间。我在 TableRow、TableCell、TableBody 和 Table 上使用了类名和类属性，但没有任何效果。我也尝试创建自定义主题，但它也不起作用。这是代码，

const useStyles = makeStyles({
  table: {
    minWidth: 650
  },
  tableRow: {
    cursor: "pointer",
    borderLeft: "8px solid #9a031e",
    marginTop: "8px"
  },
  tableCell: {
    marginTop: "8px"
  }
});

function createData(name, calories, fat, carbs, protein) {
  return { name, calories, fat, carbs, protein };
}

const rows = [
  createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
  createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
  createData("Eclair", 262, 16.0, 24, 6.0),
  createData("Cupcake", 305, 3.7, 67, 4.3),
  createData("Gingerbread", 356, 16.0, 49, 3.9)
]; …

chat从图像中可以看出，我正在开发一个。

当聊天打开时，聊天scrolls down会显示最新消息。

我想做的是，当用户scrolls up到达最后一条消息（即聊天中最旧的消息）时，oldMessage调用该函数，该函数将传递http call该消息current page以尝试检索previous messages顶部显示的最后一条消息。

我不知道我是否已经表达清楚了。

你能帮我个忙吗？

链接：codesandbox

import React, { useState, useRef, useEffect } from "react";\nimport { makeStyles } from "@material-ui/core/styles";\nimport {\n  Card,\n  Typography,\n  Icon,\n  useTheme,\n  TextField,\n  IconButton,\n  Avatar,\n  Paper\n} from "@material-ui/core";\nimport Moment from "react-moment";\nimport clsx from "clsx";\nimport moment from "moment/moment";\n\nconst message = [\n  {\n    id: 1,\n    createdAt: "",\n    message: "Hi, James!",\n    senderId: {\n      _id: …

如何使用 Material ui 模态组件并仍然可以访问模态显示内容背后的背景？这可能吗？我知道您可以使用backgroundProps 更改背景颜色，但是有没有办法完全禁用背景，并且仍然能够在背景打开时在背景中编辑内容？

我对如何自定义 Material-UI 组件感到有点困惑。我已通读文档，一位团队成员说他们使用样式组件。我正在努力改变

• 将文本字段组件的边框颜色更改为 #cbb0b0
• 宽度为 200px
• 高度为 60 像素。

我已经尝试了几个小时的各种事情，但仍然没有弄清楚。我承认失败并寻求帮助！

这是我试图修改的内容：

import styled from 'styled-components';
import TextField from '@material-ui/core/TextField'; 

export default function InputBox () {
  return (
    <TextField 
      id="outlined-basic"
      variant="outlined"
      label="Default"
      defaultValue="Input Text"
    />
  )
}

您好，我正在尝试使用 Material ui 中的堆栈组件。我使用了很多材料 ui 组件，它们都工作得很好，但由于某种原因，使用官方材料 ui 文档中的导入路径似乎不起作用。

import { Accordion, AccordionDetails, Stack, Grid, Typography } from '@material-ui/core';

它只是说：“模块“@material-ui/core”没有导出成员“Stack”。”

如果我尝试其他导入路径，它会做同样的事情： import Stack from '@material-ui/core/Stack';

我真的很困惑这里发生了什么。有人有什么想法吗？

我发现这个顺风颜色适用于顺风 css 和材质ui 颜色。就像字体一样，它们的颜色从 100 - 900 到 A100 - 400 都有很好的命名。我认为直接在 scss 或 css 文件上使用它们会很好。我该怎么做/有我可以使用的导入文件吗？

我是 ReactJS 的初学者。我的材质 UI 中的组件单选按钮组出现错误。我有一个值为布尔值的单选按钮。

当我尝试单击单选按钮中的值时，它不会选择，但onchange会触发函数的控制台日志，并且将显示如下错误：Material-UI：组件正在更改不受控制的 RadioGroup 的默认值状态正在初始化。要抑制此警告，请选择使用受控 RadioGroup。

这是我的完整代码：

<Grid item>                        
    <RadioGroup row aria-label="privateEntity" name="privateEntity" defaultValue={state.privateEntity} onChange={changePrivateEntity}>
        <FormControlLabel value={true} disabled={requestType === 'PUT' || state.agency} control={<Radio color="primary" />} label="YES" />
        <FormControlLabel value={false} disabled={requestType === 'PUT' || state.agency} control={<Radio color="primary" />} label="NO" />
    </RadioGroup>
</Grid>

这是我的 onchange 函数：

const changePrivateEntity = (event, value) => {
    event.persist();
    // console.log(value);
    let x = value === 'true' ? true : false;    
    setState((prev) => ({
      ...prev,
      privateEntityDefined: true,
      privateEntity: x,
      inputErrors: {
        ...prev.inputErrors, …

<TextField
          label="First Name"
          defaultValue="My name is" + ${name}
/>

这里，name是存储实际名称的变量。我需要将它与字符串“My name is”连接起来。$不起作用。我在“+”处收到错误，提示“identifier Expected”。