I. am getting below warning . I don't know where I am doing wrong .I am using style component in my demo application.
react_devtools_backend.js:4061 Warning: Received `false` for a non-boolean attribute `border`.
If you want to write it to the DOM, pass a string instead: border="false" or border={value.toString()}.
If you used to conditionally omit it with border={condition && value}, pass border={condition ? value : undefined} instead.
I do like this . i create a component like this. I also added few console to debug. here is my debug statement
console.log('========',depth,depth === 1);
debug statement output ======== 3 false
5MobileHeader.tsx:63 ======== 4 false
MobileHeader.tsx:63 ======== 3 false
3MobileHeader.tsx:63 ======== 4 false
component call
<CardHeader border={depth === 1}>
component definition
interface CardHeaderProps {
border: boolean;
}
export const CardHeader = styled(Card.Header)<CardHeaderProps>`
background-color: transparent;
border-radius: 0 !important;
border: 0;
padding: 10px 20px;
${props =>
props.border &&
css`
border-bottom: 1px solid #dad8d8;
`}
`;
There are 2 things you can do.
Card.Header, as Card.Header does not have a border prop, and will forward the border prop to the underlying div which also doesn't support border prop. Use shouldForwardProp option and forward prop if it is not border.https://styled-components.com/docs/api#shouldforwardprop (applicable also if u are using mui styled)
export const CardHeader = styled(Card.Header, { shouldForwardProp: (prop)=> prop !== 'border'})<CardHeaderProps>`
background-color: transparent;
border-radius: 0 !important;
border: 0;
padding: 10px 20px;
border-bottom: ${(props) => props.border ? '1px solid #dad8d8' : 'none'};
`;
If you do not want to use shouldForwardProp (which you should be using, refer to link above), then use
<CardHeader border={depth === 1 ? 1 : 0}> // instead of true/false. When u inspect the element you will see the border prop after rendering.
export const CardHeader = styled(Card.Header, { shouldForwardProp: (prop)=> prop !== 'border'})(({ theme, border })`
border-bottom: ${border ? 'some code' : 'none'};
`)
The expression can be evaluated to boolean, try
export const CardHeader = styled(Card.Header)<CardHeaderProps>`
border-bottom: ${({hasBorder}) => hasBorder ? `1px solid #dad8d8` : `none` ;
`;