With styled components how to pass theme color from Global Style to React Icons Context Provider?

Question

Looking for a way to pass color from theme to React Icons. Theme is working correctly and I'm able to pass colors to my styled components. Here is the breakdown:

index.js:

import React from 'react'
import ReactDOM from 'react-dom'

import App from './App'

// Theme
import { ThemeProvider } from 'styled-components'
import { GlobalStyles } from './theme/GlobalStyles'
import Theme from './theme/theme'

ReactDOM.render(
  <ThemeProvider theme={Theme}>
    <GlobalStyles />
    <App />
  </ThemeProvider>,
  document.getElementById('root'),
)

app.js (stripped down):

<IconContext.Provider value={{ color: `${({ theme }) => theme.colors.white}` }}>
  <FaTimes /> 
  <FaBars />
</IconContext.Provider>

the equivalent of:

<IconContext.Provider value={{ color: `#fff` }}>
  <FaTimes /> 
  <FaBars />
</IconContext.Provider>

does work and I did try:

NavElements.js:

import { IconContext } from 'react-icons/lib'
export const NavProvider = styled(<IconContext.Provider>{children}</IconContext.Provider>)`
  color: ${({ theme }) => theme.colors.color2};
`

app.js:

// <IconContext.Provider value={{ color: `#fff` }}>
<NavProvider>
  // Further code
</NavProvider> 
// </IconContext.Provider>

but I get a children error. Attempt came from reading Q&A Styled-components and react-icons <IconContext.Provider> component

Other Q&As I found with no luck:

• How to Style React-Icons
• react-icons apply a linear gradient

With a theme color in Styled Components how can I pass that color to React Icons Provider?

Answer 1

I haven't worked with react-icon but this might help

Take a look at getting the theme without styled components - there is also a hook

Your example

export const NavProvider = styled(<IconContext.Provider>{children}</IconContext.Provider>)`
  color: ${({ theme }) => theme.colors.color2};
`

work because styled expects a HTML element or a React component

Your NavProvider could be something like (haven't tried this code but it should work)

import { useContext } from 'react';
import { ThemeContext } from 'styled-components';

export const NavProvider = ({children}) => {
  const themeContext = useContext(ThemeContext);
  return (
    <IconContext.Provider value={{ color: themeContext.colors.color2 }}>
      {children}
    </IconContext.Provider>
  );
};