问题描述
正在寻找一种将颜色从主题传递到 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>
);
};