SharePoint Online - styling inconsistencies

I'm currently preparing to migrate our traditional CMS style Intranet website, to SharePoint Online.  

Because our current intranet is more or less a bespoke web CMS, it has many custom templates, and our own implementation of something quite similar to SharePoint Web Parts (templated content blocks you can add to a page to output content in a particular way). 

Many of these content blocks are bespoke to our business, and the content we need to output - hence to try and recreate the same functionality/presentation, I've been looking at building a suite of SPFX components.

In our current intranet, the library of content blocks is kept consistent using standard styles for headings, paragraphs, lists etc.  If a content block requires a specific deviation from the standard, only then will we use an overriding CSS class.

Fast forward to SharePoint Online.

I've used what I understand are the standard tools to (for example) allow the user to edit the title of a webpart when the page is in edit mode.

In the front-end, the output (when in view mode) results in a <span> wrapped inside two <div>, rather than using a heading tag as you might expect.  

All my custom built SPFX components will end up using the same method, which results in a font size of 20px, and a font weight of 600. I tried some of the other built-in web parts, such as Quick links - and they seem to work the same way.

However, if you use the built in Text web part - it uses a completely different method for outputting headings (it uses actual heading tags).

If you create a level 1 heading in the Text web part rich text editor, and it results in the output of a <h2> tag, with a font size of 28px. To get something closer to the other built-in web parts, you have to drop down to a level three heading (which is output as a <h4> tag with the font size of 20px).

Something similar happens with paragraph tags. A paragraph in an SPFX, without any specific styling, is output at 14px size, and 400 weight.  However, in the Text web part, standard paragraphs are output at 18px.

Aside from the heading output - the differences in styling seem to be because the Text web part wraps everything inside a container with the class cke_editable.  Remove that class using the browser debugger, and the paragraph text is then consistent across all web parts - as you'd expect it to be.

What I'm wondering, is whether this is something to do with our own SharePoint theme/customisation - and, is there a way of changing the Text web part default styling for paragraphs and headings?

Any information would be much appreciated!

Comments