Javascript 如何中间列出物料界面的项目？

我试图在材质ui列表中的列表项（复选框、文本和按钮）中间，但它不起作用我尝试了所有可能的解决方案，但它对我不起作用。。。如果有人知道，请修复这个。。。谢谢

import React，{useState}来自“React”；
从'react redux'导入{useDispatch}；
从“../Slices/TodoSlice”导入{todoDeleted、todoUpdated、todoCompleted}；
从“@material ui/core”导入{Checkbox，List，ListItem，makeStyles}
const useStyles=makeStyles({
listRoot：{
显示：“flex”，
为内容辩护：“中心”，
背景颜色：“#fce4ec”，
边框宽度：“1px”，
边框颜色：“AAAAA”，
边框样式：“实心”，
边界半径：“20px”，
高度：“40px”，
marginBottom：“10px”，
}
})
导出默认函数TodoItem（{todo，i}）{
常量类=useStyles（）
const dispatch=usedpatch（）；
const[editable，setEditable]=使用状态（false）；
const[text，setText]=useState（todo.text）；
常量handleUpdate=（）=>{
派遣(
成双({
id:todo.id，
文本，
})
);
如果（可编辑）{
setText（todo.text）；
}
setEditable（！editable）；
};
返回(
分派（todoCompleted（+e.target.value））}
defaultChecked={todo.done}
/>
{todo.完成了吗(

{todo.text}

) : (
{可编辑(
setText（e.target.value）}
/>
) : (
todo.text
)}
)}
handleUpdate（）}
disabled={todo.done}
>
{可编辑？'Update'：'Edit'}
{
console.log（todo.id）；
退货派送（todoDeleted（todo.id））；
}}
>
删除
);
}

---

这是代码，我尝试过每一种方法，但是它对我来说都不起作用，我错过了一些东西，

在Faskbox的中间项目中垂直对齐使用属性设置为<代码>中心< /代码>：

const useStyles = makeStyles({
  listRoot: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fce4ec',
    borderWidth: "1px",
    borderColor: "#aaaaaa",
    borderStyle: "solid",
    borderRadius: "20px",
    height: "40px",
    marginBottom: "10px",
  }
})

const useStyles = makeStyles({
  listRoot: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fce4ec',
    borderWidth: "1px",
    borderColor: "#aaaaaa",
    borderStyle: "solid",
    borderRadius: "20px",
    height: "40px",
    marginBottom: "10px",
  }
})