Pivot Link Font size in SPFX web part (hipstertabs)

[jlan927]

Hi folks

Really simplistic request from client but frankly I'm lacking on the react side of things so its a bit tricky!

We're using the HipsterTabs webpart found here: mrackley/ModernHillbillyTabs

The client has requested we adjust the font size of the pivot link headers (where the names of the tabs go) or even allow the option to flick between the default sizes (normal, large) and a third new size (larger, font-size 22).

As the font settings are imported from the Office-ui-fabric-react package, I haven't been able to figure out a simple method around using a CSS custom class or something, I think I'd really need to delve into the react framework and do something with the pivotstyles modules..

The web part is a couple of years old and its a bit of a nightmare getting all the node dependencies to the right versions in the first place for even basic compilation (we used the pre-packaged sppkg in the test tenant),

so while I'd love to spend time learning and understanding the framework to create a newer alternative, I was hoping maybe someone might have a quick look and point us in the right direction? :)

Many thanks!

[#2]

Hello, @jlan927 

I think the easiest way to customize the webpart as you wish would be to add classnames to the components you are using and edit the class in the .scss file. So, for example, to edit the pivot links you could add a class to you .scss file - let's say '.myPivot' - and then work your way into the header tag to customize it.

I took a quick look at the Pivot component - you can see the reference here - and realized that they use the PivotItem to render the link headers, so you can add a 'className={styles.myHeader}' property to this component, and inside your .scss file you and something like '.myHeader{ font-size: 14px }' to adjust it.

I hope you can understand what I mean by those 2 examples, but let me know if you need any help.

[#3]

@Carlos_Marinsthanks for your reply, much appreciated!

This is kind of what was looking into, seeing as there's a clear couple of custom styles being applied already (.Hidden and .Instructions). However please excuse my complete ignorance but I can't for the life of me get it to work with my own class against pivotitems!!

Inside hipstertabs.module.css I added:

  .myheader {

    font-size: 22px;

  }

}

Also inside hipstertabs.module.css.ts I had to add:

/* tslint:disable */

require('./HipsterTabs.module.css');

const styles = {

  hipsterTabs: 'hipsterTabs_02e133bf',

  instructions: 'instructions_02e133bf',

  hidden: 'hidden_02e133bf',

  myheader: 'myheader_02e133bf',

};

Then inside the TSX file I tried to apply the class to the pivotitem component but I get the feeling I'm either approaching the wrong component or just making a mess of the syntax. Or perhaps it's being overridden by the default choices "normal" / "large" being set earlier in the pivot?

Also (perhap unrelated) I get errors on running gulp serve relating back to index.d.ts ....Strange, but the server does load and I can still run a workbench. Not sure whats up with that.

<div>
            <Pivot
              selectedKey={this.state.selectedTab}
              headersOnly={true}
              getTabId={this.getTabId}
              onLinkClick={this.onTabClick}
              linkFormat={this.props.showAsLinks ? PivotLinkFormat.links : PivotLinkFormat.tabs}
              linkSize={this.props.normalSize ? PivotLinkSize.normal : PivotLinkSize.large}
              >
              {tabNames.map((tabName:string) => {
                return (
                  <PivotItem className={styles.myheader} linkText={tabName} itemKey={tabName}>
                  </PivotItem>
                );
              })}
            </Pivot>

Any further wisdom much appreciated, and then I'll go back to my JS101 classes to make better head or tail of whats going on 

[#4]

Hello @jlan927,

I think you're heading into the right direction. Just a couple notes to add.

FIrst, when you add a class to the module.scss file, the SharePoint Framework automatically adds a reference to the .module.scss.ts file, so you should never touch it. Just adding your class to the .scss file should be enough.

Second, I recommend you to not touch the dev's .scss file, insteading creating your own 'myStyle.module.scss' file and adding styles to it, then importing a myStyles property just like you import the styles property into your code. This way you can always go back to the original version, as well as compare the changes with the ones you made. 

Regarding errors with gulp serve, maybe you could upload an image displaying the error so I could take a look. Probably the error is keeping your changes from being saved, since the SharePoint Framework stops compiling your webpart for most of the errors it bumps into.

You could also take a look at Microsoft's SPFx doc here.