Open 6gal6ler6 opened 1 year ago
I did this change on the code:
From this: applyTo="none"
<ThemeProvider applyTo="none" theme={theme}>
<Nav
componentRef={componentRef}
onLinkClick={onLinkClick}
onLinkExpandClick={(ev?: React.MouseEvent<HTMLElement>, item?: INavLink) => {
if (item && item.key !== undefined) onHeaderClick(false, item.key, ev);
}}
selectedKey={selectedKey}
styles={navStyles}
groups={groups}
ariaLabel={ariaLabel}
/>
</ThemeProvider>
To this applyTo="element"
<ThemeProvider applyTo="element" theme={theme}>
<Nav
componentRef={componentRef}
onLinkClick={onLinkClick}
onLinkExpandClick={(ev?: React.MouseEvent<HTMLElement>, item?: INavLink) => {
if (item && item.key !== undefined) onHeaderClick(false, item.key, ev);
}}
selectedKey={selectedKey}
styles={navStyles}
groups={groups}
ariaLabel={ariaLabel}
/>
</ThemeProvider>
And this is the result:
Any planned release of this fix anytime soon? I know this was tagged for a November release but now I'm impatient for an updated package! (Thank you for all the ongoing work)
Built a theme using Fluent UI Theme Designer
Theme props:
Preview:![image](https://user-images.githubusercontent.com/20881746/200087406-5dff3019-b188-45f1-bbfd-30fd166cf583.png)
Added the Component and a Table with Data:![image](https://user-images.githubusercontent.com/20881746/200087900-eccb2978-c2b6-4ca1-bb58-332c08a11f79.png)
Applied a light theme:
Primary color: #007582 Text color: #191919 Background color: #ffffff
Result is fine:![image](https://user-images.githubusercontent.com/20881746/200088155-298ca27d-fe4d-4047-8f92-dbd4937eaf0c.png)
And when Applied the Theme to the Nav component this happened:
Primary color: #ffffff Text color: #ffffff Background color: #191919
On Hover:
AB#1002