如何對齊 Material-UI 骨架和響應？

Question

從過去兩天開始，我一直在嘗試將Paper中的material-UI-skeletons向左對齊，所以最后我找到了答案，但是如果您有其他方法可以解決此問題，請在下面回答

 <Paper className={styles.container}>
        <Skeleton variant="text" width="20%" />
        <Skeleton variant="text" width="20%" />
        <Skeleton variant="text" width="20%" />
        <Skeleton variant="text" width="20%" />
        <Skeleton variant="text" width="20%" />
      </Paper>

Answer 1

import React from "react";
import Skeleton from "@material-ui/lab/Skeleton";
import styles from "./demo.module.css";
import { Paper } from "@material-ui/core";

export default function Variants() {
  return (
    <div>
      <Paper className={styles.container}>
        <Skeleton variant="text" className={styles.text} />
        <Skeleton variant="text" className={styles.text} />
        <Skeleton variant="text"  className={styles.text} />
        <Skeleton variant="text" className={styles.text}/>
        <Skeleton variant="text" className={styles.text} />
        <Skeleton variant="text" className={styles.text}/>
      </Paper>
  );
}

.text {
  width: 100px !important;
  display: flex;
  justify-self: flex-end;
  margin-right: 10px;
}

.container {
  display: grid;
  
}

@media screen and (max-width: 600px) {
  .text{
    width: 200px !important;
  }