1

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

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

导航元素.js：

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

应用程序.js：

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

但我得到一个儿童错误。尝试来自阅读 Q&A Styled-components 和 react-icons <IconContext.Provider> 组件

我没有找到的其他问答：

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

4

1 回答 1

0

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

看看在没有样式组件的情况下获取主题- 还有一个钩子

你的例子

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>
  );
};
于 2021-02-19T17:33:58.793 回答