Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using themeColor when setting color prop on Icon results in console error #1035

Open
sushitommy opened this issue Aug 17, 2020 · 0 comments
Open
Labels
bug Something isn't working

Comments

@sushitommy
Copy link

sushitommy commented Aug 17, 2020

Describe the bug
Using the themeColor util when setting the color prop on an Icon results in a console error:
Invalid value for prop color on <span> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://fb.me/react-attribute-behavior

To Reproduce
Steps to reproduce the behavior:

  1. Put an Icon component inside your React app and use themeColor to set the color: <Icon size={14} color={themeColor('tint', 'level5')}>

Expected behavior
The color of the icon should be set without any problem (as described in the storybook docs)

Desktop (please complete the following information):

  • OS: OSX
  • Browser: Chrome

Additional context
The color prop does not show in the DOM. It seems that themeColor the function does not parse correctly to a string, so the value of the prop is invalid. It is fixable by fetching the styled-components theme context, wrap it in an object and call the themeColor function like
const themeContext = { theme: useContext(ThemeContext) as Theme.ThemeInterface };
and then
<Icon size={14} color={themeColor('tint', 'level5')(themeContext)} />

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Development

No branches or pull requests

2 participants