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.

Can't override `shouldForwardProp`

See original GitHub issue

Bug report

Describe the bug

When using the chakra factory function, users should be able to pass a custom shouldForwardProp function to replace that functionality for their custom component.

Minimal reproduction

https://codesandbox.io/s/distracted-cloud-ncioj?file=/src/App.tsx

Expected behavior

Base div element should not have hello="true" attribute attached.

Additional context

Users can specify the shouldForwardProp option, but it is always overridden inside styled.

https://github.com/chakra-ui/chakra-ui/blob/b5f1211d2093727e9733d2c6f2728adce3338676/packages/system/src/system.ts#L128-L139

Issue Analytics

State:
Created 3 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

with-heartcommented, Nov 30, 2020

@jvmazagao Nope! shouldForwardProp just determines whether a prop is also forwarded to the underlying html element or not. So in this case, <div hello="true" class="css-0"> is rendered, but it should just be <div class="css-0"> since shouldForwardProp returns false for hello. It’s really just that shouldForwardProp should come before we spread the options inside styled 😁

1reaction

with-heartcommented, Nov 30, 2020

Should be an easy one! 😄

Top Results From Across the Web

Override existing styles using styled system - Stack Overflow

Now I want to overrides existing styles by using Styled System ... import shouldForwardProp from '@styled-system/should-forward-prop'; ...

API Reference - styled-components

shouldForwardProp works much like the predicate callback of Array.filter. A prop that fails the test isn't passed down to underlying components, ...

styled() - MUI System

It adds by default the shouldForwardProp option (that can be overridden), taking into account all props used internally in the MUI components: ownerState ......

TypeScript - Emotion

Forwarding props. Sometimes you want to wrap an existing component and override the type of a prop. Emotion allows you to specify a...

Customizing Material UI Styles with parameters and props

Copy link. Info. Shopping. Tap to unmute. If playback doesn't begin shortly, try restarting your device. Your browser can't play this video.