I. am getting below warning . I don't know where I am doing wrong .I am using style ponent 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 ponent 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

ponent call

<CardHeader border={depth === 1}>

ponent 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;
    `}
`;

I. am getting below warning . I don't know where I am doing wrong .I am using style ponent 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 ponent 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

ponent call

<CardHeader border={depth === 1}>

ponent 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;
    `}
`;

• javascript
• reactjs
• react-hooks
• styled-ponents

2 Answers 2

There are 2 things you can do.

1. Don't forward the border props to 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-ponents./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'};
    `;

2. 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.
   

Cleaner styled code

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` ;
`;