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.

enter image description here

                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



                    <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"] : ''} />
  • 1
    Try adding border: 1px solid white, borderRadius: 25 CSS to DocumentCardImage – Ganesh Sanap Sep 13 '19 at 5:08
  • tried but not working ,if i remove onClick function it work – kumar Sep 13 '19 at 9:34
  • anyway to remove this border i tried but nothing working for me – kumar Sep 24 '19 at 3:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.