Document card hover colour change

Question

Hi I have used office fabric ui document card i want to change colour on hover of document card ,

                const cardStyles: IDocumentCardStyles  = {
                  root: [
                    {
                      display: 'inline-block', marginRight: 20, borderRadius: 25,  marginBottom: 20,width: 200, 
                backgroundColor:"#fbce07", outline:'none',borderWidth:0,borderStyle:'none',border:0,borderColor:'none',textAlign: "center" ,color:"white",
                      selectors: {
                        ':hover': {
                          backgroundColor:'brown'
                        },

                      }
                    }
                  ]
                };

                const Documentcardstyle = {
                  root: [
                    {
                      textAlign: "center" , borderRadius: 25,outline:'none',borderColor:'none',

                    }
                  ]
                };

                return(

                    <DocumentCard styles={cardStyles} onClick={() =>this.ShowGrid(items.GPDTemplate)}>
                    <DocumentCardTitle styles={Documentcardstyle} title={items.GPDTemplate} />
                    <DocumentCardImage  styles={Documentcardstyle} height={100}imageFit={ImageFit.cover}  imageSrc={items.GPDImageLink ? items.GPDImageLink["Url"] : ''} />
                    <DocumentCardDetails>
                    </DocumentCardDetails>
                    </DocumentCard>

                    );

Answer 1

You can create a CSS class in your WebPartName.module.scss file in your web-part project like:

/* Default background color for Document Card */
.documentCardStyle {
    background-color: green !important;
}

/* Background color for Document Card on Hover */
.documentCardStyle:hover {
    background-color: yellow !important;
}

Then use this class in your code file like:

<DocumentCard className={styles.documentCardStyle} onClick={() =>this.ShowGrid(items.Template)}>