【コピペでいけます】Google認証のボタンをMaterialUIとReactで実装

MaterialUI

2021.09.20 2021.08.23

Google認証のボタンをMaterialUIとReactで実装しました。

See the Pen “login with google” button by atsushiIMG (@atsushiimg) on CodePen.

CodePenが動作しない時はこちらから↓

コンポーネントで新しくファイルを作成し、こいつを貼り付けてロードすればいけると思います！

それぞれのタグについてはこちらから

準備中

import React from "https://cdn.skypack.dev/react@17.0.1";
import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";
import {Card, CardHeader, CardMedia, CardContent, Typography, makeStyles, Avatar, Button} from "https://cdn.skypack.dev/@material-ui/core@4.12.3";
// import logo from '/image/to/path';

const useStyles = makeStyles((theme) => ({
    button: {
        backgroundColor: "#fff",
        height: theme.spacing(5),
        '&:hover': {
            background: "#fff",
            boxShadow: "0 0 6px #4285f4"
        },
    },
    small: {
        width: theme.spacing(2),
        height: theme.spacing(2),
    },
    
}));
const GoogleButton = (props) => {
    const classes = useStyles();
    return (
        <Button
            variant="outlined"
            color="default"
            startIcon={<Avatar src={'https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg'} className={classes.small} />}
            style={{textTransform: 'capitalize'}}
            className={classes.button}
            onClick={props.onGoogleButoonClick}
        >
        Sign in with Google
      </Button>
    )
}