comment changer le CSS par défaut en utilisant emotion/css

Je souhaite modifier la conception de cette barre de défilement particulière qui est couramment utilisée par tous dans l'application. Mais sur cette page particulière, nous ne voulons pas cela.

Code pour le CSS par défaut :

div::-webkit-scrollbar-thumb {
 background-color: #216e7a;
 width: 6px;
 height: 69px;
 border-top: 1px;
 border-top-color: #394245;
 border-top-style: solid;
 }

Je veux le changer en utilisant emotion/css jusqu'à présent je l'ai fait mais rien ne se passe,

const noScrollBar = css
 div::-webkit-scrollbar-thumb {
 background-color:red,
 width:20%,
 overflow: scroll;
}
;
<div className={noScrollBar} >....

Toutes les suggestions, je suis nouveau dans les sélecteurs CSS

Solution du problème

Vous pouvez créer un css moduleavec le style :

.myClassName::-webkit-scrollbar-thumb {
 background-color:red,
 width:20%,
 overflow: scroll;
}

Puis importez-le dans votre code :

import myStyles from './my-styles.module.css'
<div className={myStyles.myClassName} >....

Vous pouvez également utiliser un simple css (pas de module):

import './my-styles.css'
<div className={'.myClassName'} >....