Customizing prop forwarding in Emotion
======================================
----------
use **isPropValid** from **@emotion/is-prop-valid**
Example:
--------
<!-- begin snippet: js hide: false console: false babel: true -->
<!-- language: react -->
import isPropValid from '@emotion/is-prop-valid'
import styled from '@emotion/styled'
const H1 = styled('h1', {
shouldForwardProp: prop => isPropValid(prop) && prop !== 'color'
})(props => ({
color: props.color
}))
render(<H1 color="lightgreen">This is lightgreen.</H1>)
<!-- end snippet -->
**NOTE**:
for **Typescript** do the following:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: react -->
const H1 = styled('h1', {
shouldForwardProp: prop => typeof prop === "string" && isPropValid(prop)
})(props => ({
color: props.color
}))
<!-- end snippet -->
check the **[docs][1]**
[1]: https://emotion.sh/docs/styled#customizing-prop-forwarding
Customizing prop forwarding in Emotion
======================================
----------
use **isPropValid** from **@emotion/is-prop-valid**
Example:
--------
<!-- begin snippet: js hide: false console: false babel: true -->
<!-- language: react -->
import isPropValid from '@emotion/is-prop-valid'
import styled from '@emotion/styled'
const H1 = styled('h1', {
shouldForwardProp: prop => isPropValid(prop) && prop !== 'color'
})(props => ({
color: props.color
}))
render(<H1 color="lightgreen">This is lightgreen.</H1>)
<!-- end snippet -->
**NOTE**:
for **Typescript** do the following:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: react -->
const H1 = styled('h1', {
shouldForwardProp: prop => typeof prop === "string" && isPropValid(prop)
})(props => ({
color: props.color
}))
<!-- end snippet -->
check the **[docs][1]**
[1]: https://emotion.sh/docs/styled#customizing-prop-forwarding
