スタイルが反映されません。

materialUIを使ってボタンを作成したのですが、ボタンの色を変えることができません。

scssを使ってボタンをスタイリングしたいのですが、色を変えることができません。
他の要素はscssが効いているのでimportはできていると思います。
下の画像の「詳しく知りたい！」と書いてあるボタンの部分です。

Home.jsx
1import React from 'react';
2import FirstviewImg from '../imgs/IMG_8922.JPG'
3import Button from '@material-ui/core/Button';
4
5const Firstview = () => {
6  return (
7      <section id="attractive">
8        <div className="inner attractive-inner">
9          <h2 className="title">STINGの3つの魅力</h2>
10          <div className="attractive-container">
11            <div className="attractive-box">
12              <h3 className="attractive-title">1.テニス</h3>
13              <p className="attractive-text">コーチが１から教えてくれるから初心者でも大丈夫！<br/>
14                初心者、経験者関係なく、みんなが楽しめます！</p>
15            </div>
16            <div className="attractive-box">
17              <h3 className="attractive-title">2.イベント</h3>
18              <p className="attractive-text">幹部が楽しいイベントを企画してくれます！<br/>
19                イベントを通じてサークルのみんなと仲良くなろう！</p>
20            </div>
21            <div className="attractive-box">
22              <h3 className="attractive-title">3.プライベート</h3>
23              <p className="attractive-text">プライベートでもサークルでよく遊ぶよ!<br/>
24                STINGに入ればプライベートが充実すること間違いなし！？</p>
25            </div>
26          </div>
27          <Button variant="contained" color="primary" href="#contained-buttons">
28            詳しく知りたい！
29          </Button>
30        </div>
31      </section>
32  )
33};

scss
1#attractive {
2  background-size: cover;
3  position: relative;
4  background-image: url('../imgs/IMG_8922.JPG');
5  
6  
7  &::before {
8    z-index: 0;
9    content: "";
10    display: block;
11    position: absolute;
12    top: 0;
13    left: 0;
14    right: 0;
15    bottom: 0;
16    background-color: rgba(255,255,255,0.8);
17  };
18}
19
20.attractive-inner {
21  padding: 18px 18px 55px;
22};
23
24.attractive-container {
25  display: flex;
26  justify-content: space-between;
27  position: relative;
28};
29
30.attractive-box {
31  margin-top: 40px;
32  width: calc(33.33333% - 60px / 3);
33};
34
35.attractive-title {
36  font-size: 2.4rem;
37};
38
39.attractive-text {
40  line-height: 30px;
41  margin-top: 13px;
42};
43
44.MuiButton-containedPrimary {
45  background-color: green;
46}