How to position a real Docx file in a Material CardMedia

I have a Codesandbox

I have this app that displays different files like jpg, mp4 or now docx files. I can’t make docx file position so it look good but jpg or mp4 is working OK.

Try it just open a doxc file.

In file 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);

I think the problem is css something. I have tried so much and think I missed something

Answer

Replace your return block with following block in your docx-viewer.jsx.

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