Material-UIで右下に浮いてるボタンを作る
Material Designのサイトでよく見る、右下に浮いてるボタンの作り方。
ReactとMaterial-UIを使えば簡単だけど、公式のドキュメントにやり方が書いていないためにメモ。
inline CSSというものを使って、ファイル内でスタイルを定義してあげると、JavaScriptの構文でスタイルが適用できる。123456789101112131415161718192021import React from 'react';import FloatingActionButton from 'material-ui/FloatingActionButton';import ContentAdd from 'material-ui/svg-icons/content/add';const FloatingBtn = () => { const style = { margin: 0, top: 'auto', right: 20, bottom: 20, left: 'auto', position: 'fixed', }; return ( <FloatingActionButton style={style}> <ContentAdd /> </FloatingActionButton> )};export default FloatingBtn;