React CSS对象中BoxSizing的正确语法与TS类型不兼容报错处理

该错误并非boxSizing取值错误，是TypeScript默认类型推断规则导致：

• 未显式标注类型的普通样式对象中，boxSizing: "border-box"会被TS推断为宽泛的string类型
• PhoneInput组件的inputStyle属性要求传入符合React.CSSProperties类型的对象，其中boxSizing的合法类型是BoxSizing | undefined（仅包含border-box、content-box等合法取值的字面量联合类型，范围远窄于string类型），因此抛出类型不兼容报错。

以下三种方案任选其一即可：

• 方案1：给样式对象显式标注React.CSSProperties类型（最推荐，可同时校验所有样式属性合法性）

import React from 'react';

export const PhoneInputStyle: React.CSSProperties = {
  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",
  borderRadius: "10px",
  outline: "none",
  gridRowStart: "1",
  gridColumnStart: "1",
}

• 方案2：给整个样式对象添加as const断言，将所有属性自动转为只读字面量类型

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",
  borderRadius: "10px",
  outline: "none",
  gridRowStart: "1",
  gridColumnStart: "1",
} as const;

• 方案3：仅给boxSizing属性添加类型断言，单独解决当前报错

boxSizing: "border-box" as const,
// 或
boxSizing: "border-box" as React.CSSProperties['boxSizing'],

内容的提问来源于stack exchange，提问作者cricciardi