Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
<Heading /> color prop TypeScript error
See original GitHub issueUsing the color prop for light and dark Heading renders a TypeScript error i.e
<Heading color={{ dark: 'white', light: 'black' }}>
Title
</Heading>
Expected Behavior
No errors
Actual Behavior
TypeScript error
Type '{ dark: string; light: string; }' is not assignable to type 'string | ({ dark?: string | undefined; light?: string | undefined; } & string) | undefined'.
Type '{ dark: string; light: string; }' is not assignable to type '{ dark?: string | undefined; light?: string | undefined; } & string'.
Type '{ dark: string; light: string; }' is not assignable to type 'string'.
Your Environment
- Grommet version: 2.5.5
Issue Analytics
- State:
- Created 5 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
Typescript is enforcing color to be a type string when passed ...
Typescript seems to expect color to be a string rather than the type I set it via the props interface, I am still...
Read more >Typescript error using styled-components - Stack Overflow
[ts] Exported variable 'Title' has or is using name 'StyledComponentClass' ... export const backColor = (props: MyProps) => props.theme.
Read more >Error when calling theme Props in component using ReactJs ...
I need to pass the color of a theme to a component, I'm using type script (I'm a beginner). I came across an...
Read more >TypeScript - Emotion
The easiest way to use the css prop with TypeScript is with the new JSX ... import styled from '@emotion/styled' const Link =...
Read more >FAQs - styled-components
import styled from 'styled-components'. const Input = styled.input.attrs({. type: props => props.inputType,. })` background: blue;. color: red;.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Hi, I have same issue with Text component, also with the same error by typescript. I write here because I think is the same problem.
I’m using grommet v2.7.0
Thanks for reporting! issues are fixed and will be available on our next release