Styling modern web parts?

%3CLINGO-SUB%20id%3D%22lingo-sub-254067%22%20slang%3D%22en-US%22%3EStyling%20modern%20web%20parts%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-254067%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20would%20like%20to%20know%20how%20can%20I%20style%20web%20parts%20in%20the%20modern%20SharePoint.%3C%2FP%3E%3CP%3EI%20have%20a%20page%20with%203%20Library%20webparts%20one%20each%20the%20other%20and%20doesn't%20look%20nice%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F50097i4321EF51AFB83986%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22printscreen.png%22%20title%3D%22printscreen.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHow%20can%20I%20create%20a%20borders%20or%20something%20like%20that%20without%20affecting%20other%20web%20parts%3F%20Is%20there%20some%20special%20class%20attached%20to%20this%20webpart%20that%20I%20can%20use%20in%20an%20extension%20(css)%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBest%20regards%3C%2FP%3E%3CP%3EAmerico%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-254067%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-255151%22%20slang%3D%22en-US%22%3ERe%3A%20Styling%20modern%20web%20parts%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-255151%22%20slang%3D%22en-US%22%3E%3CP%3Ethanks%20to%20both!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20will%20take%20a%20look%20to%20the%20PNP%20way%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBest%20regards%3C%2FP%3E%3CP%3EAmerico%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-254121%22%20slang%3D%22en-US%22%3ERe%3A%20Styling%20modern%20web%20parts%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-254121%22%20slang%3D%22en-US%22%3EHi%20Am%C3%A9rico%3CBR%20%2F%3E%3CBR%20%2F%3EAs%20mentioned%20by%20Juan%20on%20the%20previous%20reply%2C%20CSS%20overrides%20are%20not%20supported.%3CBR%20%2F%3EYou%20can%20try%20to%20achieve%20a%20better%20result%20using%20the%20OOB%20divider%20web%20parts%20or%20you%20can%20try%20to%20create%20a%20custom%20SPFx%20web%20part%20with%20the%20styles%20that%20you%20need%20in%20case%20you%20feel%20this%20is%20required.%20If%20so%2C%20look%20at%20the%20PnP%20reusable%20control%20for%20lists%20as%20it%20will%20give%20you%20a%20similar%20look%20and%20feel.%3CBR%20%2F%3E%3CBR%20%2F%3EJoel%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-254107%22%20slang%3D%22en-US%22%3ERe%3A%20Styling%20modern%20web%20parts%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-254107%22%20slang%3D%22en-US%22%3EAFAIK%2C%20you%20cannot%20do%20this%20in%20default%20modern%20WebParts%3C%2FLINGO-BODY%3E
Regular Contributor

Hi,

 

I would like to know how can I style web parts in the modern SharePoint.

I have a page with 3 Library webparts one each the other and doesn't look nice:

 

printscreen.png

 

How can I create a borders or something like that without affecting other web parts? Is there some special class attached to this webpart that I can use in an extension (css)?

 

Best regards

Americo

3 Replies
AFAIK, you cannot do this in default modern WebParts
Hi Américo

As mentioned by Juan on the previous reply, CSS overrides are not supported.
You can try to achieve a better result using the OOB divider web parts or you can try to create a custom SPFx web part with the styles that you need in case you feel this is required. If so, look at the PnP reusable control for lists as it will give you a similar look and feel.

Joel

thanks to both!

 

I will take a look to the PNP way 

 

Best regards

Americo