title: What is the correct syntax for BoxSizing in a React CSS Object
body: <p>I'm trying to give style to a prop in React but I don't know to correct way to write it :</p>
  <pre><code>&lt;PhoneInput
     inputStyle={!(window.innerWidth &lt;= 768) ? {...InputDivStyle, ...PhoneInputStyle, textIndent: &quot;96px&quot;} : {...InputDivStyle, ...PhoneInputStyle, textIndent: &quot;32px&quot;}}
  &lt;/PhoneInput&gt;
  </code></pre>
  <p>inputStyle gives me the error :</p>
  <p><code>Types of property 'boxSizing' are incompatible. Type 'string' is not assignable to type 'BoxSizing | undefined'.ts(2322)</code></p>
  <pre><code>export const PhoneInputStyle = {
    fontSize: &quot;clamp(13px, 1.111vw, 16px)&quot;,
    lineHeight: &quot;clamp(15px, 1.319vw, 19px)&quot;,
    position: &quot;relative&quot;,
    width: &quot;100%&quot;,
    height: &quot;51px&quot;,
    cursor: &quot;pointer&quot;,
    display: &quot;flex&quot;,
    flexDirection: &quot;row&quot;,
    alignItems: &quot;center&quot;,
    padding: &quot;8px 16px&quot;,
    border: `1px solid black`,
    boxSizing: `border-box`, //This ain't right, I tried &quot;border-box&quot; and it didn't work either
    borderRadius: &quot;10px&quot;,
    outline: &quot;none&quot;,
    gridRowStart: &quot;1&quot;,
    gridColumnStart: &quot;1&quot;,
  }
  </code></pre>
  <p>I'm pretty sure it's only an error of syntax but I can't find the correct way to write boxSizing.</p>