使用样式组件如何将主题颜色从全局样式传递到 React Icons Context Provider？

如何解决使用样式组件如何将主题颜色从全局样式传递到 React Icons Context Provider？

正在寻找一种将颜色从主题传递到 React 图标的方法。主题工作正常，我能够将颜色传递给我的样式组件。这是细分：

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（精简版）：

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

相当于：

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

确实有效，我确实尝试过：

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>

但我收到了一个儿童错误。尝试来自阅读问答Styled-components and react-icons <IconContext.Provider> component

我发现的其他问答：

在 Styled Components 中使用主题颜色时，如何将该颜色传递给 React Icons Provider？

解决方法

我没有与 react-icon 合作过，但这可能会有所帮助

看看getting the theme without styled components - 还有一个hook

你的例子

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

工作，因为 styled 需要一个 HTML 元素或 React 组件

您的 NavProvider 可能类似于（尚未尝试此代码，但应该可以）

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>
  );
};