MergeStyles $ Selector Not Working When Applied to a Component with a Root Style Set

[oengusmacinog-zz]

Bug Report

• Package version(s): v5.56

Priorities and help requested (not applicable if asking question):

Are you willing to submit a PR to fix? Yes

Requested priority: Normal

Products/sites affected: N/A

Describe the issue:

When applying style sets in a component (e.g. Nav) to a sub-component (e.g. ActionButton) which already has a root style set you will run into an issue using a $ selector on the item like:

'$link:hover &': {
     color: blue
}

The conflict happens because it's root style set would normally be applied to a class like root-###, but being applied as link inside the Nav component applies that style set to link-### class name. Styles applied using this $ selector syntax do not render out.

Actual behavior:

chevronButton: { // applied to html <button> tag
     position: 'relative'
},
compositeLink: { // applied to ActionButton Fabric Component
     display: 'block'
},
link: {
     display: 'inline',
     selectors: {
          '$chevronButton:hover &': {  // Renders styles correctly
               color: '#009'
          },
          '$compositeLink:hover &': {  // Never renders styles
               color: '#009'
          }
     }
}

Expected behavior:

Style renders to page.

[dzearing]

@oengusmacinog or @jordandrako Can you distill your repro into a codepen?

I believe that mergeStyles is generating the correct rules. Very likely, your rule is wrong, or your DOM structure is wrong.

Is the element "link" a decendent of chevronButton and compositeLink?

Here's a codepen that works.

https://codepen.io/dzearing/pen/OQqeXQ?editors=0010

[dzearing]

I don't believe this is a bug. But if we can be clear about what is broken, and have a codepen to illustrate, happy to investigate.

[oengusmacinog-zz]

https://codepen.io/oengusmacinog/pen/YeMWPG codepen showing the issue boiled down

[oengusmacinog-zz]

Updated codepen here.

This behavior is due to the fact button specifically is using the "classNames" JS styles setup that we are no longer using. When button is updated to take in getStyles and use styled() this should work inheriting the classNames correctly, but when that is the case it would be better practice to used styled() to pull BaseButton and make a NavButton component, that's a custom styled BaseButton just for the Nav component. This will be much more friendly to customized styling.

Button is on the slate for being updated to use updated MergeStyles already, so I am going to go ahead and close that. If this becomes a priority for someone reading this please feel free to open a separate issue detailing why.