0

I just created this Next js project. I defined a main btn class and two sub classes. For some reason Next js giving this Error ReferenceError: normal is not defined.What I'm doing wrong
Global.css

.flex-container {   display: flex;  height: auto;   flex-wrap: wrap;    justify-content: center;
    background-color: #ffffff;  }

.flex-container > div { background-color: #ffffff;  border: 1px solid #d4d4d4;  width: 10em;
    margin: 0.5em;  padding: 10px 1px;  text-align: center; line-height: auto;  text-decoration: none;  }


button.module.css

.btn {  display: inline-block;  padding: 8px 15px;    background-color: #0d6efd;    color: #fff;    text-decoration: none;  border: none;   }
.btn.btn-success {  background-color: #198754;  color: #fff;}
.btn.btn-normal {background-color: #fff; color: #000; }

.btn:hover {    background-color: #0055C9;  color: #fff;    text-decoration: none;  }
.btn-success:hover {    background-color: #077C46;  color: #fff;    text-decoration: none;  }
.btn-normal:hover { background-color: #0055C9;  color: #fff;    text-decoration: none;  }

.flex-container > button {  width: fit-content; margin: 0.5em;  text-align: center; line-height: auto;  font-size: smaller; }

Index.js

<div className='flex-container'>
 <div><h2>MCQS With Answers</h2>
  <div className={`${styles.btn}` ${styles.btn-normal}}><Link href='/'>9th Class MCQS</Link></div>
 </div>
</div>
Aly
  • 197
  • 2
  • 10
  • 1
    Change `styles.btn-normal` to `styles['btn-normal']` -- Voting to close this as a duplicate of https://stackoverflow.com/q/7122609, https://stackoverflow.com/q/13869627, https://stackoverflow.com/q/12953704, etc. – brc-dd Nov 15 '21 at 15:37
  • thanks man. It worked – Aly Nov 15 '21 at 15:37

0 Answers0