如何使 CSS 与 MUI TableContainer 一起工作答案

【问题标题】：How to make CSS work with MUI TableContainer如何使 CSS 与 MUI TableContainer 一起工作
【发布时间】：2021-02-11 20:37:00
【问题描述】：

我创建了一个包含数据的 MUI 网格，使用 MUI 网站构建它，我希望它看起来像这样：

What I would like my chart to look like

相反，它看起来像这样，好像它无法读取“密集表”属性：

What it actually looks like

这是我的代码：

<Card className="flightPlanCard" style={{ maxHeight: 300, overflow: 'auto', backgroundColor: "rgba(255,255,255,.5)" }}>
                            <TableContainer component={Paper}>
                                <Table size="small" aria-label="a dense table" >
                                    <TableHead>
                                        <TableRow>
                                            <StyledTableCell>ID</StyledTableCell>
                                            <StyledTableCell align="center">Fréquence</StyledTableCell>
                                            <StyledTableCell align="center">Track</StyledTableCell>
                                            <StyledTableCell align="center">Distance&nbsp;(NM)</StyledTableCell>
                                            <StyledTableCell align="center">Coordonées</StyledTableCell>
                                            <StyledTableCell align="center">Nom/Remarque</StyledTableCell>
                                        </TableRow>
                                    </TableHead>
                                    <TableBody style={{ fontSize: 10 }}>
                                        {rows.map((row) => (
                                            <TableRow key={row.name} style={{ height: 10 }} >
                                                <StyledTableCell component="th" scope="row">
                                                    {row.id}
                                                </StyledTableCell>
                                                <StyledTableCell align="center">{row.frequency}</StyledTableCell>
                                                <StyledTableCell align="center">{row.track}</StyledTableCell>
                                                <StyledTableCell align="center">{row.distance}</StyledTableCell>
                                                <StyledTableCell align="center">{row.coordinates}</StyledTableCell>
                                                <StyledTableCell align="center">{row.name}</StyledTableCell>
                                            </TableRow>
                                        ))}
                                    </TableBody>
                                </Table>
                            </TableContainer>
                        </Card>

TableContainer 位于卡片内，并且在运行我的应用程序时也会收到警告：

Material-UI: The key `row` provided to the classes prop is not implemented in ForwardRef(TableCell).
You can only override one of the following: root,head,body,footer,sizeSmall,paddingCheckbox,paddingNone,alignLeft,alignCenter,alignRight,alignJustify,stickyHeader.

我该如何解决这个问题？

提前致谢

【问题讨论】：

欢迎来到 Stack Overflow！下次注意，请不要将帖子底部的图像 URL 包装在代码块中。如果您这样做，它们将不会作为可点击链接包含在您的帖子中。

标签： javascript css material-ui next.js

【解决方案1】：

毕竟我找到了一个很好的解决方案：您必须在文件夹 /pages 中添加一个名为 _document.jsx 的文件，其中包含以下代码：

import React from 'react'
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { ServerStyleSheets } from '@material-ui/styles'
import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles'

const theme = responsiveFontSizes(createMuiTheme())

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <meta charSet="utf-8" />
          <meta
            name="viewport"
            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
          />
          <meta name="theme-color" content={theme.palette.primary.main} />
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"
          />
          <style jsx global>
            {`
              html,
              body {
                height: 100%;
                width: 100%;
              }
              *,
              *:after,
              *:before {
                box-sizing: border-box;
              }
              body {
                font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
                font-size: 1rem;
                margin: 0;
              }
            `}
          </style>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

MyDocument.getInitialProps = async ctx => {
  // Render app and page and get the context of the page with collected side effects.
  const sheets = new ServerStyleSheets()
  const originalRenderPage = ctx.renderPage

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: App => props => sheets.collect(<App {...props} />)
    })

  const initialProps = await Document.getInitialProps(ctx)

  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [
      <React.Fragment key="styles">
        {initialProps.styles}
        {sheets.getStyleElement()}
      </React.Fragment>
    ]
  }
}

就是这样！没有什么要导入的，它只是工作:)

【讨论】：