I. estoy recibiendo por debajo de la advertencia. No sé dónde estoy haciendo mal. Estoy usando el componente de estilo en mi aplicación de demostración.
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.me gusta esto Creo un componente como este. También agregué algunas consolas para depurar. aquí está mi declaración de depuración
console.log('========',depth,depth === 1);salida de declaración de depuración ======== 3 falso
5MobileHeader.tsx:63 ======== 4 false MobileHeader.tsx:63 ======== 3 false 3MobileHeader.tsx:63 ======== 4 falsellamada de componente
<CardHeader border={profundidad === 1}>
definición de componente
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; `} `;Hay 2 cosas que puedes hacer.
Card.Header , ya que Card.Header no tiene un accesorio de borde y reenviará el accesorio de borde al div subyacente que tampoco admite accesorios de borde. Use la opción shouldForwardProp y adelante prop si no es border .https://styled-components.com/docs/api#shouldforwardprop (aplicable también si está usando estilo mui)
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'}; `; Si no desea usar shouldForwardProp (que debería usar, consulte el enlace anterior), 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'}; `)La expresión se puede evaluar como booleana, intente
export const CardHeader = styled(Card.Header)<CardHeaderProps>` border-bottom: ${({hasBorder}) => hasBorder ? `1px solid #dad8d8` : `none` ; `;