I'm trying to give style to a prop in React but I don't know to correct way to write it :
<PhoneInput
inputStyle={!(window.innerWidth <= 768) ? {...InputDivStyle, ...PhoneInputStyle, textIndent: "96px"} : {...InputDivStyle, ...PhoneInputStyle, textIndent: "32px"}}
</PhoneInput>
inputStyle gives me the 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",
}
I'm pretty sure it's only an error of syntax but I can't find the correct way to write boxSizing.
export const PhoneInputStyle = {
// ...
boxSizing: `border-box`,
// ...
}
Since you don't have an explicit type on this object, typescript will create a type automatically. It sees that boxSizing is a string, so it gives boxSizing the type string. Unfortunately, this is too broad for what you end up doing. box sizing can't be any string, but instead can only be very specific strings.
I would recommend that you give this object an explicit type of CSSProperties. This type will, among other things, restrict boxSizing to its legal values:
import { CSSProperties } from "react";
export const PhoneInputStyle: CSSProperties = {
// ...
boxSizing: `border-box`,
// ...
}
I got the same problem, and I also solved it explicitly giving PhoneInputStyle a CSSProperties type. It worked thanks !