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

front-end, inline-css, material-ui, react

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;

参考リンク