Open1

【React Amplify Cognito】ログイン画面でボタンのデフォルトの色を変更してみた

概要

React, Amplify, Cognito でユーザー認証機能を実装したが、ボタンやリンクに使用されているAmazonのオレンジデフォルトカラーを変更してみる。

したこと

ボタン等の色変更

Before

After

対応内容

  1. src/配下にstyles.cssを作成し、変更箇所記述
  2. src/pages/_app.tsxで作成したstyles.cssのimport

早速、styles.cssを作成してみる。
今回はグリーン系の色を使用してみる。

:root {
  --amplify-primary-color: #70D14D;
  --amplify-primary-tint: #70D14D;
  --amplify-primary-shade: #70D14D;
}

次に_app.tsxで作成したcssを呼び出す

......

import '../styles.css'

......

上記手順でボタンの色変更対応ができた。

参考サイト

https://zenn.dev/dove/articles/63494de652511c
ログインするとコメントできます