I am creating SPFx webpart using React JS. On click in document card component I am getting unwanted border.
I tried removing it but not working. I have applied border-radius on document card style, but still getting square border.
if i remove on-click this border goes.
const cardStyles: IDocumentCardStyles = {
root: [
{
display: 'inline-block', marginRight: 20, borderRadius: 25, marginBottom: 20,width: 90,
backgroundColor:"#fbce07", outline:'none',borderWidth:0,borderStyle:'none',border:0,borderColor:'white',textAlign: "center" ,color:"white",
selectors: {
':hover': {
backgroundColor:'#ff9933' ,outline:'none',borderColor:'white',borderRadius: 25
},
}
}
]
};
return(
<DocumentCard styles={cardStyles} onClick={() =>this.ShowGrid(items.Template)}>
<DocumentCardTitle title={items.Template} />
<DocumentCardImage styles={cardStyles1} height={100}imageFit={ImageFit.cover} imageSrc={items.ImageLink ? items.ImageLink["Url"] : ''} />
</DocumentCard>);
border: 1px solid white, borderRadius: 25
CSS toDocumentCardImage
– Ganesh Sanap Sep 13 '19 at 5:08