Skip to content

mergeStyles: Global selector support#3963

Merged
dzearing merged 2 commits into
microsoft:masterfrom
dzearing:global-support-merge-styles
Feb 13, 2018
Merged

mergeStyles: Global selector support#3963
dzearing merged 2 commits into
microsoft:masterfrom
dzearing:global-support-merge-styles

Conversation

@dzearing

Copy link
Copy Markdown
Member

Adding a feature to mergeStyles, which allows you to wrap your selector in a :global() wrapper, akin toe the SCSS modules approach.

Example:

mergeStyles({
  selectors: {
    ':global(button)': {
      overflow: 'visible'
    }
  }
});

@micahgodbolt

Copy link
Copy Markdown
Member

And this will work in our getStyles approach as well? Does it have to be nested inside of "root:" or some other IComponentStyles key?

@dzearing

Copy link
Copy Markdown
Member Author

Of course, this totally works in getStyles:

getStyles(props: IFooStyleProps): IFooStyles {
  return {
    root: {
      selectors: {
        ':global(button)': {
          overflow: 'visible'
        }
     }
  };
}

@micahgodbolt

Copy link
Copy Markdown
Member

Great, just making sure.

@dzearing dzearing merged commit 711ef24 into microsoft:master Feb 13, 2018
@dzearing dzearing deleted the global-support-merge-styles branch February 13, 2018 23:40
@microsoft microsoft locked as resolved and limited conversation to collaborators Aug 31, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants