How to make CSS work with MUI TableContainer

Question

I have created a MUI Grid with data in it, using the MUI website to build it and I would like it to look like that:

Instead, it looks like this, as though it could not read the "a dense table" property:

Here is my code:


                            
                                
                                        
                                            ID
                                            Fréquence
                                            Track
                                            Distance (NM)
                                            Coordonées
                                            Nom/Remarque
                                        
                                    
                                        {rows.map((row) => (
                                            
                                                
                                                    {row.id}
                                                
                                                {row.frequency}
                                                {row.track}
                                                {row.distance}
                                                {row.coordinates}
                                                {row.name}
                                            
                                        ))}

The TableContainer is inside a Card and I also get Warnings when running my app:

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.

How can I fix this?

Thanks in advance

user_14501649 · Answer

I found a great solution to solve this after all: you have to add a file called _document.jsx containing the following code in the folder /pages:

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 (
      
        
          
          
          
          
          
        
        
          
          
        
      
    )
  }
}

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()
    })

  const initialProps = await Document.getInitialProps(ctx)

  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [
      
        {initialProps.styles}
        {sheets.getStyleElement()}
      
    ]
  }
}

And that's it! Nothing to import, it just works :)

How to make CSS work with MUI TableContainer

1 Answers