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

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

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

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;

参考リンク

• Make material-ui reactjs FloatingActionButton float