reactjs - Använd pseudo-klasser med importerat stylesheet som CSS-modul

Jag använder React i kombination med TypeScript, jag har en separat CSS-fil för varje komponent. Jag importerar min CSS-fil på följande sätt:

import styles from 'pages/login/Login.module.css'

Att tilldela ett className ser ut så här:

<input className={styles.username} ref={nameRef} type="text"  placeholder="USERNAME"/>

Finns det ett alternativ att använda pseudo-klasser?

<input className={styles.username:active} ref={nameRef} type="text"  placeholder="USERNAME"/>

Detta tillvägagångssätt fungerar uppenbarligen inte, det är bara för att göra det tydligare vad jag vill uppnå.

Svar #1

När du tillämpar ett className bör alla pseudo-selektorer som definieras i stilmallen för den CSS-klassen automatiskt tillämpas också.

Eftersom CSS-moduler fungerar genom att lägga till klasser till dina element kan du enkelt lägga till pseudoklassväljare.

/* component/text.css */
.text {
  color: #777;
  font-weight: 24px;
}
.text:hover {
  color: #f60;
}

/* component/text.jsx */
import styles from './text.css';

<p className={ styles.text }>Text with hover</p>

Tyvärr kan vi inte använda dem en i taget.

Relaterade artiklar