Warning: Received `false` for a non-boolean attribute `border`. in react?

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

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'};

`)