CSS に基づいて MaterialUI ボタン​​クリックアニメーションを実装し、それを React コンポーネントにカプセル化します。

.xボタン{ 
  位置: 相対的; 
  オーバーフロー: 非表示; 
  表示: インラインブロック; 
  パディング: 6px 1em; 
  境界線の半径: 4px; 
  色: #fff; 
  背景色: #000; 
  user-select:none; // ユーザーが選択できないようにします。cursor:pointer; 
} 
 
.リップル{ 
  ＆：：後 { 
    コンテンツ： ""; 
    表示: ブロック; 
    位置: 絶対; 
    幅: 100%; 
    高さ: 100%; 
    上: 0; 
    左: 0; 
    背景画像: 放射状グラデーション(円、#fff 10%、透明 11%); 
    背景繰り返し: 繰り返しなし; 
    背景位置: 50%; 
    変換: スケール(12, 12); 
    不透明度: 0; 
    遷移: 変換 .6s キュービックベジェ(.75,.23,.43,.82)、不透明度 .6s; 
  } 
  &:active::after { 
    変換: スケール(0, 0); 
    不透明度: .5; 
  } 
}

'classnames' からクラス名をインポートします 
'./index.less' からスタイルをインポートします 
 
/** 
 * @param {onClick} func 外部に公開されるクリックイベント * @param {className} string カスタムクラス名 * @param {type} string ボタンタイプ primary | warning | info | default | pure 
 * @param {shape} 文字列 ボタンの形状 円 | 半径 (デフォルト) 
 * @param {block} ブール型ボタン表示 true | false (デフォルト) 
 */ 
デフォルト関数 Button(props) をエクスポートします。 
  let { children, onClick, className, type, shape, block } = props 
  戻り値 <div 
            className={classnames(styles.xButton、styles.ripple、styles[type]、styles[shape]、block ?styles.block : '', className)} 
            onClick={onClick} 
        > 
            { 子供たち } 
        </div> 
}

.xボタン{ 
  ボックスのサイズ: 境界線ボックス; 
  表示: インラインブロック; 
  パディング: 6px 1em; 
  境界線の半径: 4px; 
  色: #fff; 
  フォントファミリー: 継承; 
  背景色: #000; 
  user-select:none; // ユーザーが選択できないようにします。cursor:pointer; 
  テキスト配置: 中央; 
  ＆。主要な { 
    背景色: #09f; 
  } 
  ＆。警告 { 
    背景色: #F90; 
  } 
  ＆。情報 { 
    背景色: #C03; 
  } 
  ＆。純粋な { 
    境界線: 1px 実線 #ccc; 
    色: rgba(0, 0, 0, 0.65); 
    背景色: #fff; 
    ＆：：後 { 
      背景画像: 放射状グラデーション(円、#ccc 10%、透明 11%); 
    } 
  } 
 
  // 図形&.円{ 
    境界線の半径: 1.5em; 
  } 
 
  // 親要素に適応する&.block { 
    // 幅: 100%; 
    表示: ブロック; 
  } 
} 
 
.リップル{ 
  位置: 相対的; 
  オーバーフロー: 非表示; 
  ＆：：後 { 
    コンテンツ： ""; 
    表示: ブロック; 
    位置: 絶対; 
    幅: 100%; 
    高さ: 100%; 
    上: 0; 
    左: 0; 
    ポインタイベント: なし; 
    背景画像: 放射状グラデーション(円、#fff 10%、透明 11%); 
    背景繰り返し: 繰り返しなし; 
    背景位置: 50%; 
    変換: スケール(12, 12); 
    不透明度: 0; 
    遷移: 変換 .6 秒、不透明度 .6 秒; 
  } 
  &:active::after { 
    変換: スケール(0, 0); 
    不透明度: .3; 
    //初期状態遷移を設定します: 0s; 
  } 
}

// インデックス.js 
'@/components' から { Button } をインポートします。 
'./index.css' からスタイルをインポートします 
デフォルトの関数をエクスポートする（）{ 
  戻る （ 
    <div className={styles.normal}> 
      <Button className={styles.btn}>デフォルト</Button> 
      <Button className={styles.btn} type="warning">警告</Button> 
      <Button className={styles.btn} type="primary">プライマリ</Button> 
      <Button className={styles.btn} type="info">情報</Button> 
      <Button className={styles.btn} type="pure">純粋</Button> 
      <Button className={styles.btn} type="primary" shape="circle">円</Button> 
      <Button className={styles.mb16} type="primary" block>プライマリ&ブロック</Button> 
      <Button type="warning" shape="circle" block onClick={() => { alert('block')}}>circle&block</Button> 
    </div> 
  ） 
}