如何在 Material CardMedia 中定位真实的 Docx 文件

Question

我有一个Codesandbox

我有这个应用程序可以显示不同的文件，例如 jpg、mp4 或现在的 docx 文件。我无法确定 docx 文件的位置，所以它看起来不错，但 jpg 或 mp4 工作正常。

只打开一个 doxc 文件试试。

在文件中 FileContentRenderer.jsx here below I use switch case and n open Component needed like docx-viewer.jsx

/* eslint-disable no-return-assign */
import React from "react";
import CardMedia from "@material-ui/core/CardMedia";
import { withStyles } from "@material-ui/core/styles";
import { DocxViewer, VideoViewer, UnsupportedViewer } from "./drivers";

const styles = () => ({
  viewerWrapperMp4: {
    background: "black",
    width: "100%",
    height: "20vw",
    textAlign: "center"
  },
  viewerMp4: {
    width: "auto",
    height: "100%"
  },
  outer: {
    height: "100%",
    width: "100%",
    position: "relative",
    overflow: "hidden"
  },
  cardMedia: {
    width: "100%",
    height: "20vw"
  }
});

class FileContentRenderer extends React.Component {
  driveForImage() {
    const { CurrentFile } = this.props;
    const { classes } = this.props;
    return (
      <CardMedia
        className={classes.cardMedia}
        image={CurrentFile.preview}
        title="test test"
      />
    );
  }

  render() {
    const { classes, CurrentFile } = this.props;
    const filePath = CurrentFile;
    switch (CurrentFile.mediaType) {
      case "csv": {
        break;
      }
      case "jpg": {
        return this.driveForImage();
      }
      case "image/jpeg": {
        return this.driveForImage();
      }
      case "image/gif": {
        return this.driveForImage();
      }
      case "image/bmp": {
        return this.driveForImage();
      }
      case "image/png": {
        return this.driveForImage();
      }
      case "video/mp4": {
        return (
          <CardMedia>
            <VideoViewer fileType="mp4" filePath={filePath.preview} />
          </CardMedia>
        );
      }
      case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document': {
                return (
                    <CardMedia className={classes.cardMedia}>
                        <DocxViewer
                            fileType="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                            filePath={filePath.preview}
                        />
                    </CardMedia>
                );
            }
      default: {
        return UnsupportedViewer;
      }
    }
    return null;
  }
}

export default withStyles(styles)(FileContentRenderer);

我认为问题出在 css 上。我已经尝试了很多，我想我错过了什么

Answer 1

用 docx-viewer.jsx 中的以下块替换您的 return 块。

return (
  <div
    id={docxId}
    style={{
      backgroundColor: 'white',
      float: 'left',
      overflowY: 'auto',
      height: '20vh',
    }}
  >
    <Loading />
  </div>
);