Rebass: exteneding Banner component.

Created on 2 Sep 2017 · 2Comments · Source: rebassjs/rebass

Hello :D
First of all thanks for awesome component library 😄
I am trying to extend banner component, and having trouble with changing flex related props.
exteneding Banner component.
I am having this error message on my chrome browser.

 Unknown props `alignItems`, `justifyContent`, `minHeight` on <div> tag

I think this happens because of the banner component is using div...
Can anyone give me a hint to solve this problem?
Thanks

Source

oiojin831

👍1

Most helpful comment

Hey @oiojin831 those aren't valid attributes on the Banner component and not part of the rebass blacklist. This is more of a styled-component problem which has been discussed here https://github.com/jxnblk/rebass/issues/266.

Here's a way to extend rebass components while mitigating the unknown props error.

import { Banner as RebassBanner } from 'rebass';

const Banner = styled(({ alignItems, justifyContent, minHeight, ...restProps }) =>
  <RebassBanner {...restProps} />,
)`
  align-items: ${props => props.alignItems};
  justfiy-content: ${props => props.justifyContent};
  min-height: ${props => props.minHeight};
  background: #00F;
`;

export default Banner;

epilande on 20 Sep 2017

❤2 👍1

All 2 comments

Here's a way to extend rebass components while mitigating the unknown props error.

import { Banner as RebassBanner } from 'rebass';

const Banner = styled(({ alignItems, justifyContent, minHeight, ...restProps }) =>
  <RebassBanner {...restProps} />,
)`
  align-items: ${props => props.alignItems};
  justfiy-content: ${props => props.justifyContent};
  min-height: ${props => props.minHeight};
  background: #00F;
`;

export default Banner;

epilande on 20 Sep 2017

❤2 👍1

Closing this since I think the above comment addresses the question