Javascript 如何删除左侧填充的材质

我正在使用material UI card组件使用ReactJS创建一个notes页面，但单击卡片时，涟漪会在左侧留下一些填充。我希望纹波在整个卡中都可见，如文档所示。以下是激活时卡的外观图片：

代码如下：

const useStyles = makeStyles({
  root: {
    maxWidth: 345,
  },
  media: {
    height: 140,
  },
});

export default function MediaCard() {
  const classes = useStyles();

  return (
    <div className='notes-container'>
      <form className='search'>
        <input className='search-bar' type='search'></input>
        <button className='btn-sml-2' type='submit'>
          search
        </button>
      </form>
      <ul className='notes-showcase'>
        {NotesList.map((item, index) => {
          return (
            <li key={index}>
              <Card className={classes.root}>
                <CardActionArea>
                  <CardMedia
                    style={{ height: 10, paddingTop: "56.25%" }}
                    className={classes.media}
                    image='https://cdn.crispedge.com/4d91c6.png'
                    title=''
                  />
                  <CardContent>
                    <Typography gutterBottom variant='h5' component='h2'>
                      {item.title}
                    </Typography>
                    <Typography
                      variant='body2'
                      color='textSecondary'
                      component='p'
                    >
                      {item.chapter}
                    </Typography>
                  </CardContent>
                </CardActionArea>
                <CardActions>
                  <Button size='small' color='primary'>
                    Share
                  </Button>
                  <Button size='small' color='primary'>
                    Open
                  </Button>
                  <Button size='small' color='primary'>
                    Download
                  </Button>
                </CardActions>
              </Card>
            </li>
          );
        })}
      </ul>
      <AddNew name='notes' />
    </div>
  );
}

const useStyles=makeStyles({
根目录：{
最大宽度：345，
},
媒体：{
身高：140，
},
});
导出默认函数MediaCard（）{
const classes=useStyles（）；
返回(
搜索

{NotesList.map（（项，索引）=>{
返回(

{item.title}
{项目.第章}
分享
打开
下载

);
})}

);
}

看起来不错。你能在线重现这个问题吗（例如作为沙盒链接）？Nvm解决了这个问题，有一个css span样式设置了一些边距，MUI涟漪效应也使用了span标记，因此出现了奇怪的边距。谢谢