material ui <Card>の横スクロール化

Question

こちらの記事を参考に、動的なカードたちを横スクロール化しようとしてみたのですが、

<Card
  style={{
   display:inline-block;
}}

といったように入れることはできませんでした。

material uiのスタイルを変える際、このような操作ができましたら、やり方を教えていただけると助かります。

Answer 1

Reactでstyleに対し{}で書く場合、JavaScriptの連想配列で書かなければいけません。しかし、あなたのコードは連想配列の書き方ではなく、CSSのスタイルの書き方です。
正しいスタイルの書き方はこうです。

<Card
  style={{
   display:'inline-block'
}}

参考記事
https://qiita.com/kuniken/items/b06de893c22f33499a22

Comments

[MOTOMUR]

ありがとうございます。文法間違いだったのですね。

しかし、
white-space　: 　’nowrap’
や
overflow-x　: 　’scroll’
などはmaterial uiには存在しないようです。

こちらはどうやって同じ方法を実現できるでしょうか。

[masaya_ohashi]

参考記事を読んでみてください。ハイフンで区切られたスタイル名は、代わりにキャメルケースで表現できるようになっています。white-spaceはwhiteSpace、overflow-xはoverflowXです。

[MOTOMUR]

ありがとうございます！無事実装できました！

これからのmaterial uiをコーディングする際、ハイフンアルファベットの場合は大文字にしたら使えるということですね！助かりました！

[masaya_ohashi]

material uiというより、JSXやReactの話です。material uiを使わなくても、Reactで書くなら必要な知識ですよ。

[MOTOMUR]

はい！

[MOTOMUR]

ちなみにですが、このように横スクロール化した場合、隙間なく敷き詰められてしまうのですが、このカード間のマージン（縦横）を指定するにはどのようにしたらよろしいでしょうか。

[masaya_ohashi]

私ならmargin-rightやmargin-bottomといったスタイルを使います。

[MOTOMUR]

ありがとうございます！

[MOTOMUR]

しかし、それはどこに入れたら良いでしょう。
先ほどのstyle全てに、

marginRight:'10px',
marginBottom:'10px',

と記述しましたが、隙間はできませんでした。何が間違っているのでしょう。

[masaya_ohashi]

なにが、と言われても、それで隙間が出来ないなら私には予想できません。ブラウザの開発者ツール等でスタイルがどのように適用されているかを調べることが一番の近道かと思います。Windowsであれば、だいたいのブラウザはF12を押して開発者ツールが開きます。各ブラウザによって操作は少し違いますが、大体どのブラウザにも「この要素にはどのようなスタイルが適用されているか」を見る手段が用意されています。そこで「なぜ隙間ができないのか」の原因を探してください。

[MOTOMUR]

検証してみた結果、カードのmarginがautoとなっていました。また、marginRightは存在しませんでした。この場合は、marginRightはmaterial uiのcardには対応していないということでしょうか？

[masaya_ohashi]

どうやって指定していますか？私の環境でMaterial UIを入れてCardのstyleにmarginRight:'100px'と書いたら正しくカードの横に100pxのマージンが生成されました。

[MOTOMUR]

<div className='container'
style={{
overflowX: 'scroll',
marginRight:'10px',
marginBottom:'10px',
}}
>
<div
style={{
display: 'inline-block',
whiteSpace: 'nowrap',
marginRight:'10px',
marginBottom:'10px',
}}
>
{
this.state.starred_users.length === 0
? <div><h>There is no starred user</h></div>
: <ul>{
this.state.starred_posts.slice().map(
function(starred_user){
return(
<Card
style={{
width: '100%',
display: 'inline-block',
marginRight:'10px',
marginBottom:'10px',
}}
>
<CardHeader
title={starred_user.author}
avatar=""
/>
<CardTitle title={starred_user.title} subtitle={" star:(" + starred_user.postStar.starCount + ")"} />
<CardText>
{starred_user.body}
</CardText>
<CardActions>
<FlatButton
secondary
label="Comment"
onClick={() => this.commentFncOpen(starred_user.uid,starred_user.postId)} />

</CardActions>

<CardHeader
showExpandableButton
title="Comments" />
<List expandable>
<p>--------------------------------------</p>
<ListItem
leftAvatar={<Avatar src='' />}
primaryText="Author"
secondaryText={
<p>Hello</p>
}
/>
</List>
</Card>

)
}.bind(this)
)
}</ul>
}
</div>
</div>

この部分が全文ですね。このように指定しています。

[masaya_ohashi]

ぱっとみで原因は私にはわかりません。

CardにWidth:'100%'を指定している理由はなんですか？あとul直下にCard要素があるのも変だと思います。li要素でCardを挟んだ上で、li要素にdisplay:'inline-block'やmarginRight:'10px'等を指定するべきかと思います。

[MOTOMUR]

li要素で挟んだら、できるようになりました。ありがとうございます。

[masaya_ohashi]

よかったです