Material-UIで右下に浮いてるボタンを作る

Material Designのサイトでよく見る、右下に浮いてるボタンの作り方。
ReactとMaterial-UIを使えば簡単だけど、公式のドキュメントにやり方が書いていないためにメモ。

inline CSSというものを使って、ファイル内でスタイルを定義してあげると、JavaScriptの構文でスタイルが適用できる。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import 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;

参考リンク