0

I have a row of pivot buttons which I use for my spfx form in a web part. I need to be able to give a grey background when users hover over the control. so at the moment my control looks like this :

enter image description here

So the blue bar changes on select but I want a grey hover over so the users know where to click.

Thanks in advance.

I have written this code to get the style but I cannot add the style into the component: 

const styler  = {
root: [
{
selectors: {
':hover': {
 background: '#2C3539'
}
}
}
]
};

Jason_Hough
  • 392
  • 5
  • 31

1 Answers1

0

In this codepen you can see how you can pass styles to the correct style areas for Pivot control. 

link: [
    !rootIsTabs && {
      selectors: {
        ':hover': {
          backgroundColor: palette.neutralLighter,
          color: palette.neutralDark
        },
        ':active': {
          backgroundColor: palette.neutralLight
        }
      }
    }
  ],

To mention also, is that the styles I demo will be default styles in the next major release (Fabric v7), so you can have this in your code until we have an official release (within a few weeks) and when you have the ability to upgrade you can remove it and have it backed in into the component.

P.S.: the animation is another bonus that comes with this new major release.

Vitalie Braga
  • 476
  • 2
  • 3
  • really helpful but I am getting Property 'styles' does not exist on type 'IntrinsicAttributes & IPivotProps'.ts(2322) - when I enter the styles in the pivot command – Jason_Hough May 10 '19 at 09:22
  • This can mean only one thing... the version of `office-ui-fabric-react` they use is old and perhaps the `Pivot` was not converted to css-in-js in that version. Can you look what version they use so I can verify and confirm my theory. If it is like I said I might still try and help you out but need a version number they use. – Vitalie Braga May 11 '19 at 06:42
  • looking at the package.json this is the version we are on : "@microsoft/sp-office-ui-fabric-core": "1.7.1", – Jason_Hough May 13 '19 at 09:32
  • This looks like a custom bundle coming from the spfx framework and it doesn't really tell me the version of the `office-ui-fabric-react` they or you are using. But I did see the error you mentioned before and it usually points to an outdated version. – Vitalie Braga May 28 '19 at 18:12