На карточках Material-UI отсутствует CSS при загрузке - PullRequest
Новая
       21

На карточках Material-UI отсутствует CSS при загрузке

1 голос
/ 29 мая 2019

enter image description here

У меня есть карты, созданные с использованием Material-UI. Проблема в том, что когда страница загружается или перезагружается, карты выглядят как те, что слева. Там, кажется, нет никаких CSS. Через несколько секунд все выглядит так, как должно выглядеть. Это из-за того, что я делаю с моей стороны, или просто так работает Material-UI 

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 репо: https://github.com/Kohdz/port

1 Ответ

1 голос
/ 29 мая 2019

Хорошо, немного поборясь с этой штукой, я наконец-то понял.Ключ, кажется, в /pages/_document.js.Мне нужно было сделать 2 вещи: вернуть _document.js и обработать getInitialProps(), а также добавить flush из 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;

Пример пользовательского интерфейса материала приведен здесь. Это была также интересная тема

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...