What is the correct syntax for BoxSizing in a React CSS Object-CodePudding

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.

CodePudding user response：

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`,
  // ...
}

CodePudding user response：

I got the same problem, and I also solved it explicitly giving PhoneInputStyle a CSSProperties type. It worked thanks !