如何寫：懸停和：焦點在javascript css對象

Question

我正在嘗試寫入：懸停和：焦點內部反應組件的樣式。這是我嘗試過的。

這是我的組件

<MyBtn className={classes.authBtn}> This is sample text </MyBtn> 

在我的樣式對象，我嘗試了這些下列一些文件我已經在網上找到。

authBtn: { 
     '&:hover': { 
      backgroundColor: '#1565C0' 
     } 
    } 

接下來，

'authBtn_hover': { 
    backgroundColor: '#1565C0' 
} 

接下來，

authBtn: { 
      ':hover': { 
       backgroundColor: '#1565C0' 
      } 
     }