Olá Felipe, tudo bem?
O erro que você comentou, TypeError: Cannot read properties of undefined (reading 'focus'), geralmente ocorre quando tentamos acessar uma propriedade de um objeto que não está definido.
No seu caso, isso pode estar acontecendo porque o objeto styleSheet não está sendo passado corretamente, ou pode não conter as propriedades esperadas (focus, hover, srOnly). Conseguiria te ajudar de forma mais assertiva caso mandasse seu GitHub com o código completo, mas consigo sugerir uma solução que pode funcionar.
Podemos garantir que sempre existam valores padrão para essas propriedades. Veja abaixo o código do componente Box, com os valores padrão para focus, hover e srOnly:
export function Box({
as,
styleSheet = {}, // Define um valor padrão como objeto vazio
...props
}) {
const {
focus = {}, // Define um valor padrão para focus
hover = {}, // Define um valor padrão para hover
srOnly = false, // Define um valor padrão para srOnly
...restStyleSheet // Coleta o restante das propriedades
} = styleSheet;
const Tag = as || 'div';
return (
<React.Fragment>
<Tag {...props} className={`${props.className ? props.className : ''} ${srOnly ? 'sr-only' : ''}`} />
<style jsx>{`
${Tag} {
${renderCSS(restStyleSheet, 'xs')}; // Usa o restante das propriedades
}
${Tag}:hover {
${renderCSS(hover, 'xs')};
}
${Tag}:focus {
${renderCSS(focus, 'xs')};
}
// ... (restante do código)
`}</style>
</React.Fragment>
)
}
Valores Padrão: Ao definir styleSheet = {}, garantimos que, se styleSheet não for passado, ele será um objeto vazio. Isso evita que tentemos acessar propriedades de um objeto undefined.
Desestruturação: Usamos a desestruturação para extrair focus, hover e srOnly do styleSheet, definindo valores padrão para cada um deles. Assim, se essas propriedades não forem fornecidas, elas terão valores padrão (um objeto vazio para focus e hover, e false para srOnly).
Restante das Propriedades: O operador ...restStyleSheet coleta todas as outras propriedades que não foram explicitamente desestruturadas. Isso permite que você passe outras propriedades para o componente Box sem problemas.
Uso das Propriedades: Ao renderizar o componente, usamos restStyleSheet para aplicar estilos ao Tag, e hover e focus para aplicar os estilos correspondentes.
Com essas alterações, você deve conseguir evitar o erro e fazer o componente funcionar corretamente.
Espero ter ajudado. Conte com o apoio do fórum em sua jornada :)
Um abraço e bons estudos!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
