Skip to content

Pivot override styles#4444

Merged
dzearing merged 12 commits intomicrosoft:masterfrom
natalieethell:pivotOverrideStyles
May 14, 2018
Merged

Pivot override styles#4444
dzearing merged 12 commits intomicrosoft:masterfrom
natalieethell:pivotOverrideStyles

Conversation

@natalieethell
Copy link
Copy Markdown
Contributor

Pull request checklist

Description of changes

Add optional className to Pivot props to allow customization of component styles.

<FocusZone direction={ FocusZoneDirection.horizontal }>
<ul
className={ css('ms-Pivot', styles.root,
className={ css('ms-Pivot', styles.root, this.props.className,
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the wrong place to put the className.

It needs to live on the outmost div element. Otherwise the consumer can't make it flexGrow: 1.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See line 94.

I would recommend we use getNativeProps and mix native props into the root div.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

don't want this to go stale. :)

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes! So sorry about the delay. Just pushed the changes. Let me know what you think.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Working on the merge conflict.


return (
<div>
<div { ...divProps } >
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit, space at end.

Also update tests :)

@JasonGore JasonGore closed this May 11, 2018
@JasonGore JasonGore reopened this May 11, 2018
@dzearing dzearing merged commit 3cae9bf into microsoft:master May 14, 2018
@Chaitra1006
Copy link
Copy Markdown

Any updates on how to override the Pivot styles?
Reference to issue #4390

@JasonGore
Copy link
Copy Markdown
Member

JasonGore commented Jul 6, 2018

As of #5324, you should now be able to use the IPivotStyles interface to define a function or an object for the styles prop, or use Theming. Here is a CodePen example showing each approach.

@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.

Can't override Pivot and PivotItem styles with styled-components

4 participants