我正在使用ReactJS，我正在創建一個簡單的可點擊按鈕，但問題是: 當我把它放在一個div中時，它不會在按鈕上顯示寫好的信息。

截圖:

代碼片段:HTML

.nm:hover {
  background-image: url(../assets/glitchnoise.jpg);
  text-shadow: -1px 0px 21px rgba(255,255,255,0.46);    
  background-size: 400% 400%;
    background-position: -100%;
    -webkit-background-clip: text;
            background-clip: text;

            animation: animatedtext-slow .2s infinite alternate-reverse;
    transition: .8s ease-in-out;
    -webkit-touch-callout: none; /* Safari */
    -webkit-user-select: none; /* Chrome */     
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
      }


      @keyframes animatedtext-slow {
        from {
           background-position: -100%;
        }
        to{
          background-position: -400%;
        }
      }


.btn-component{
  display: flex;
  position: relative;
  justify-content: center;
  
  
}
  
.btn{ 
width: 173px;
height: 47px;
background: rgba(255, 255, 255, 0.93);
border: 1.5px solid #000000;
font-family: 'Maiden Orange';
font-style: normal;
font-weight: 400;
font-size: 24px;


filter: drop-shadow(5px 5px 4px #000000);
  }

<div className='nm'> FLEXITY
        <div className='btn-component'>
          <button className='btn'>LISTEN NOW</button>
         </div>
        </div>

問題出在父div:

第行:-WebKit-text-fill-color:transparent；

將此添加到框div:-WebKit-text-fill-color:black；作品