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.

Need to fix unfiltered props in styled components

See original GitHub issue

The Problem

index.js:3671 Warning: Received `false` for a non-boolean attribute `fill`. If you want to write it to the DOM, pass a string instead: fill='false' or fill={value.toString()}. If you used to conditionally omit it with fill={condition && value}, pass fill={condition ? value : undefined} instead. in div (created by Context.Consumer) in Styled(div) (created by Tabs)

The Solution

Let’s use Emotion’s shouldForwardProp to filter out non-standard attributes on DOM nodes across the library.

How do I know it’s fixed?

There should be no errors or warnings in the console on localhost:6060 on each component page in the styleguide.

Issue Analytics

State:
Created 4 years ago
Comments:6 (6 by maintainers)

Top GitHub Comments

2reactions

TejasQcommented, Jul 3, 2019

Sure! Appreciate your great work!

1reaction

march213commented, Jul 5, 2019

Problem fixed.

Top Results From Across the Web

Disable automatic passing down of props · Issue #135 - GitHub

@mxstbr This issue is about styling 3-rd party components. I believe that you want to pass all the props unfiltered in this case....

Advanced Usage - styled-components

styled -components has full theming support by exporting a <ThemeProvider> wrapper component. This component provides a theme to all React components underneath ...

filter - CSS: Cascading Style Sheets - MDN Web Docs - Mozilla

The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering ......

How to use this.props in React Styled Components

You need to use a callback which accepts props passed to the component like so: const MyStyledComponent = styled.div` position: fixed; ...

Cadillac cts interchangeable parts - Caritas Castellaneta

Don't settle for cheap aftermarket copies of floor mats when you need the quality and style of the original, GMPartsOnline. Professional Parts People™ ......