Estoy tratando de darle estilo a un accesorio en React pero no sé cómo escribirlo correctamente:
<PhoneInput inputStyle={!(window.innerWidth <= 768) ? {...InputDivStyle, ...PhoneInputStyle, textIndent: "96px"} : {...InputDivStyle, ...PhoneInputStyle, textIndent: "32px"}} </PhoneInput>inputStyle me da el error:
Types of property 'boxSizing' are incompatible. Type 'string' is not assignable to type 'BoxSizing | undefined'.ts(2322)
export const PhoneInputStyle = { fontSize: "clamp(13px, 1.111vw, 16px)", lineHeight: "clamp(15px, 1.319vw, 19px)", position: "relative", width: "100%", height: "51px", cursor: "pointer", display: "flex", flexDirection: "row", alignItems: "center", padding: "8px 16px", border: `1px solid black`, boxSizing: `border-box`, //This ain't right, I tried "border-box" and it didn't work either borderRadius: "10px", outline: "none", gridRowStart: "1", gridColumnStart: "1", }Estoy bastante seguro de que solo es un error de sintaxis, pero no puedo encontrar la forma correcta de escribir boxSizing.
export const PhoneInputStyle = { // ... boxSizing: `border-box`, // ... } Como no tiene un tipo explícito en este objeto, TypeScript creará un tipo automáticamente. Ve que boxSizing es una cadena, por lo que le da a boxSizing el tipo string . Desafortunadamente, esto es demasiado amplio para lo que terminas haciendo. el tamaño del cuadro no puede ser cualquier cadena, sino que solo puede ser cadenas muy específicas.
Recomendaría que le dé a este objeto un tipo explícito de CSSProperties . Este tipo, entre otras cosas, restringirá boxSizing a sus valores legales:
import { CSSProperties } from "react"; export const PhoneInputStyle: CSSProperties = { // ... boxSizing: `border-box`, // ... }Tengo el mismo problema y también lo resolví dando explícitamente a PhoneInputStyle un tipo CSSProperties. Funciono gracias!