web-dev-qa-db-ja.com

material-ui reactjs FloatingActionButtonをfloatにする

FloatingActionButtonが標準の右下の画面位置に結果なしで浮かぶ例を見つけようとした後、デフォルトでそのコーナーに浮かぶことのない通常のボタンのように見えるので、それを提供できればあなたに来ます。

カスタムのCSSルールを設定してフロートさせる必要があると思われますか？ Material-UIドキュメントでは、フローティングに関するプロパティについては言及していません Material-UI FloatingActionButton documentation 。

htmlcssreactjsmaterial-ui
31
Franco

確かに、現時点ではコンポーネントのFloatingActionButtonにこのプロパティはありません。

それを待っている：

1）インラインスタイルを使用したソリューション：

コンポーネントの上部に、次を追加します。

const style = {
    margin: 0,
    top: 'auto',
    right: 20,
    bottom: 20,
    left: 'auto',
    position: 'fixed',
};

...そしてあなたのレンダリングメソッドで：

render() {
    return <FloatingActionButton style={style}><ContentAdd /></FloatingActionButton>
}

OR

2）CSSファイルを使用したソリューション

CSSファイルを追加します（例：index.htmlで参照されているstyles.css）：

.fab {
    margin: 0px;
    top: auto;
    right: 20px;
    bottom: 20px;
    left: auto;
    position: fixed;
};

...そして、React component：

render() {
    return <FloatingActionButton className="fab"><ContentAdd /></FloatingActionButton>
}
64
Gauthier Poulet

Material-uiでCSSを操作する場合は、withStylesカリー化関数を使用する方が適切です。

このような：

import React, {Component} from 'react';
import {Button} from "material-ui";
import {Add} from 'material-ui-icons';
import { withStyles } from 'material-ui/styles';
const style = theme => ({
  fab: {
    margin: 0,
    top: 'auto',
    left: 20,
    bottom: 20,
    right: 'auto',
    position: 'fixed',

  }
});
class MyPage extends Component{
render() {
    const {classes} = this.props;
        return <Button fab variant="fab" color="primary" aria-label="add" className={classes.fab}><Add />
    </Button>
}
export default withStyles(style)(MyPage);

ドキュメントリンク： https://material-ui.com/customization/css-in-js/

8
milad nekooei

カスタムテーマを作成する場合は、テーマ オーバーライド を使用して、FAB（フローティングアクションボタン）が右下隅に浮かんでいるスタイルを設定できます。

import { createMuiTheme } from "@material-ui/core";

export default createMuiTheme({
    overrides: {
        MuiFab: {
            root: {
                position: 'absolute',
                bottom: '2rem',
                right: '2rem'
            }
        }
    }
});

これは、すべてのコンポーネントの使用に対してFABをオーバーライドします。特定のクラス名で同じスタイルを使用し、他の用途で再度オーバーライドできます。

3
Rudolf Olah

私は実際にこれを Material-UI documentation で見つけました。少し調整を加えたところです。これが結果のコードです。

import { makeStyles } from '@material-ui/core/styles';
import Fab from '@material-ui/core/Fab';
import AddIcon from '@material-ui/icons/Add';

const useStyles = makeStyles(theme => ({
  fab: {
    position: 'fixed',
    bottom: theme.spacing(2),
    right: theme.spacing(2),
  },
}));

これをコンポーネントに追加します

const classes = useStyles();

return (
  <Fab color="primary" aria-label="add" className={classes.fab}>
    <AddIcon />
  </Fab>
);
1
Sofonias Abathun