//tips
//smart contract
ページの半分を使用したカードの表示については、一つのGrid item内に複数表示することで解決。
{/* {notes.map(note => ( */}
{/* <Grid item xs={12} md={12} lg={12} key={note.id}> */}
<Grid item xs={12} md={12} lg={12}>
{notes.map(note => (
<NoteCard note={note} />
))}
</Grid>
カード間の隙間がないのでそちらも調整する。
<Grid itemにspacing={3}をつけるだけでは表示が変更されなかったので、別の方法を模索。
Failed prop type: The prop `spacing` of `Grid` can only be used together with the `container` prop.
akeStylesに下記を追加。
cardM:{
marginTop:20,
marginBottom:20,
},
一旦無理やりItemコンポーネントを作成し、カードをさらにカード形式のpaperで囲むことで幅をつくったが少し無理があるので別の方法を試す。
const Item = styled(Paper)(({ theme }) => ({
// // backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
// // ...theme.typography.body2,
// padding: theme.spacing(1),
// // textAlign: 'center',
// color: theme.palette.text.secondary,
// }));
こちらの方法を分解して、下記に適用。
cardM:{
"& > *": {
margin: theme.spacing(1)
}
},
なかなかカードの間に隙間を作れない。
https://mui.com/components/grid/#main-content
<Box>の中にGrid containerを格納するのが正しい方法なのだろうか。
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={2}>
一旦、上のカードとの被りを解消するために空行divを追加。
toolh:{
height:50,
flexGrow:1//可能な限りの幅を取る
<div className={classes.toolh}></div>
ここから着想を得て、divで囲んだら無事にcarの間に余白を作ることに成功。
<Grid item xs={6} md={6} lg={6} >
{/* <Grid item xs={12} md={12} lg={12} className={classes.cardM}> */}
{notes.map(note => (
<div className={classes.cardh}>
<NoteCard note={note} />
</div>
))}
</Grid>
ここに先に試したtwitterも連動させていく。問題は認証部分をどうするか。再度設計を確認する。
