javascript - 如何使CSS与MUI TableContainer一起使用

我已经使用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.

我怎样才能解决这个问题？
提前致谢

最佳答案

我找到了解决该问题的好方法:您必须在/ 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>
    ]
  }
}

就是这样!没什么要导入的，它可以正常工作:)

关于javascript - 如何使CSS与MUI TableContainer一起使用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/64590473/

mui

javascript - 如何使CSS与MUI TableContainer一起使用