next.js 如何使CSS与Material UI TableContainer一起工作

kkih6yb8 于 12个月前发布在其他

关注(0)|答案(1)|浏览(122)

我创建了一个包含数据的Material UI Grid，使用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位于Card中，运行应用程序时也会出现错误：

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.

型
我该如何解决此问题？
Thanks in advance

next.js

来源：https://stackoverflow.com/questions/64590473/how-to-make-css-work-with-material-ui-tablecontainer

1条答案

按热度按时间

g52tjvyc1#

我找到了一个很好的解决方案来解决这个问题：你必须在文件夹/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>
    ]
  }
}

字符串
就是这样！没有什么可导入的，它只是工作：）

赞(0）回复(0）举报 12个月前

我来回答

next.js 如何使CSS与Material UI TableContainer一起工作

1条答案

相关问题

热门标签

最新问答