bertindak balas gaya tuding butang tersuai tidak berfungsi

Question

Saya mempunyai butang dalam projek React saya dan saya telah menyediakannya seperti ini.

<label style={styles.label}>
    <input style={styles.input} type="file" accept="image/*" onChange={this.onUpload} />
</label>

Tetapan gaya adalah seperti ini

label : {
    borderRadius: '1vh',
    cursor: 'pointer',
    height: '2.5vh',
    margin: '0.5vh',
    minWidth: '50px',
    fontSize: '1.7vh',
    justifyContent: 'center',
    alignItems: 'center',
    display: 'flex',
    flexDirection: 'row',
    backgroundColor : 'green',
    color           : 'black',
    opacity         : '0.9',
    '&:hover': {
        backgroundColor : 'green',
        color           : 'black',
        opacity         : '1',
    },
},
input : {
    zIndex   : -1,
    position : 'absolute',
    opacity  : 0,
    visibility : 'hidden',
}

Gaya hover tidak diaktifkan apabila tetikus berada di atas label, saya tidak pasti apa yang saya lakukan salah di sini.

Answer 1

Anda tidak boleh menambah tuding menggunakan CSS sebaris (Bagaimana cara saya menulis "a:hover" dalam CSS sebaris? ). Gunakan CSS luaran untuk ini. Dokumentasi React menyebut cara menambah helaian gaya luaran