CODEWITHSUNDEEP
cssreactjsmaterial-ui
VickTree
VickTree

Reputation: 909

material-ui cards dont have CSS on load

enter image description here

I have cards created using material-UI. The problem is when the page loads or re-loads, the cards look like the ones on the left. There does not appear to be any css on it. After a few seconds it looks like it should look. Is this because of something i am doing on my end or is it just the way just Material-UI works 

import React, { Component } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';



class ImgMediaCard extends Component {
  constructor(props){
    super(props)
  }
  render(){

  return (
    <div className="Cards-div">
    <Card className="Cards">
      <CardActionArea>
        <CardMedia
          component="img"
          alt={this.props.imgAlt}
          height="300"
          image={this.props.imgLink}
          title={this.props.imgTitle}
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            {this.props.title}
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            {this.props.text}
            {this.props.technologies}
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button size="small" color="primary">
          Visit
        </Button>

      </CardActions>
    </Card>
  </div>
)};
}

export default ImgMediaCard;

Github repo: https://github.com/Kohdz/port

Upvotes: 3

Views: 1298

Answers (1)

Anthony Z
Anthony Z

Reputation: 394

Alright after wrestling with this thing for a bit, I finally got it. The key seems to be in /pages/_document.js. There's 2 things that I had to do, bring back _document.js and have it handle the getInitialProps() as well as add the flush from styled-jsx. 

import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
import { ServerStyleSheets } from '@material-ui/styles';
import flush from 'styled-jsx/server';
import { createMuiTheme } from '@material-ui/core/styles';
import red from '@material-ui/core/colors/red';

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#556cd6',
    },
    secondary: {
      main: '#19857b',
    },
    error: {
      main: red.A400,
    },
    background: {
      default: '#fff',
    },
  },
});

class MyDocument extends Document {

    render() {
        return (
            <html lang="en" dir="ltr">
                <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&display=swap"
                    />
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </html>
        );
    }
}

MyDocument.getInitialProps = async ctx => {

    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: (
            <React.Fragment>
                {sheets.getStyleElement()}
                {flush() || null}
            </React.Fragment>
        ),
    };
};

export default MyDocument;

Material UI has an example here. This was also an interesting thread

Upvotes: 3

Related Questions