-
Notifications
You must be signed in to change notification settings - Fork 2.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
MergeStyles $ Selector Not Working When Applied to a Component with a Root Style Set #4138
Comments
@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. |
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. |
https://codepen.io/oengusmacinog/pen/YeMWPG codepen showing the issue boiled down |
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 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. |
Bug Report
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: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:
Expected behavior:
Style renders to page.
The text was updated successfully, but these errors were encountered: