Estoy desarrollando una herramienta para hacer boletines. Eso significa que necesito usar muchas etiquetas y atributos HTML4/XHTML1 obsoletos. Por ejemplo, quiero crear un elemento como este:
<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="%some css here%"> ... </table>Mi pila es React 17, componentes con estilo v5.3.3 y mecanografiado v4.5.5.
interface ITable { align?: string, cellPadding?: number, cellSpacing?: number, border?: number, width?: string, } export const SCTable = styled.table.attrs(({ cellPadding = 0, cellSpacing = 0, border = 0, align, width }: ITable) => { return { cellPadding, cellSpacing, align, width, border, } })<ITable>` `; <SCTable width="42%" align="center"></SCTable> <table width="42%" cellpadding="0" cellspacing="0" class="..."></table> Como puede ver, solo se agregaron 3 de 5 attrs. Revisé los documentos de React sobre esto y React no admite atributos de align y border , pero al mismo tiempo
También puede usar atributos personalizados siempre que estén completamente en minúsculas.
También hay algunos problemas con la etiqueta de table en HTML5, porque border attr está en desuso (pero align solo no es compatible, como cellPadding ). Cambiar el tipo de documento a XHTML no tiene ningún efecto.
¿Alguna idea de cómo hacer que todos los atributos aparezcan en el elemento? Reemplazarlos con CSS no ayudará en caso de abrir el marcado de resultados en algunos clientes de correo electrónico.
Bien, encontré la solución. Los accesorios obsoletos se filtraron por componentes con estilo, y puede anular este filtro con shouldForwardProp :
const SCTable = styled.table .withConfig({ shouldForwardProp: (prop, defaultValidatorFn) => ['align', 'border'].includes(prop) || defaultValidatorFn(prop), }) .attrs<ITable>(({ cellPadding = 0, cellSpacing = 0, border = 0, align, width }) => { return { cellPadding, cellSpacing, align, width, border, }; })<ITable>``;