使用样式化组件如何将主题颜色从全局样式传递到 React 图标上下文提供程序？

Question

正在寻找一种将颜色从主题传递到 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>

但是我收到一个儿童错误。尝试来自阅读问答

我没有找到的其他问答：

react-icons apply a linear gradient

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

Answer 1

我没有使用过 react-icon 但这可能会有所帮助

看看getting the theme without styled components - there is also a 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>
  );
};

使用样式化组件如何将主题颜色从全局样式传递到 React 图标上下文提供程序？

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

styled-components

react-icons

themeprovider