**tl;dr:** material-ui throws TS error when using a variable as the value of a grid `xs` property in JSX

---

I'm implementing grids in material-ui with React/TypeScript

I want the width of a particular element to be dependent on how many of that element there are.

It's a simple calculation that outputs a whole number between 12 and 4:

```
const sheets = [0, 1, 2];
const sheetColWidth = sheets.length > 3 ? 3 : 12 / sheets.length;

```

but when I use sheetColWidth (value `1`, `2`, `3` or `4`, of type `number`) as the value for the grid's `xs` property, TS throws an error:

```
No overload matches this call.
  Overload 1 of 2, '(props: { component: ElementType<any>; } & Partial<Record<Breakpoint, boolean | 1 | 6 | 3 | 5 | 7 | 10 | "auto" | 2 | 4 | 8 | 9 | 11 | 12>> & { ...; } & CommonProps<...> & Pick<...>): Element', gave the following error.
    Type 'number' is not assignable to type 'boolean | 1 | 6 | 3 | 5 | 7 | 10 | "auto" | 2 | 4 | 8 | 9 | 11 | 12 | undefined'.
  Overload 2 of 2, '(props: DefaultComponentProps<GridTypeMap<{}, "div">>): Element', gave the following error.
    Type 'number' is not assignable to type 'boolean | 1 | 6 | 3 | 5 | 7 | 10 | "auto" | 2 | 4 | 8 | 9 | 11 | 12 | undefined'.  TS2769

```

I have a reduced example on Codesandbox:

<https://codesandbox.io/s/loving-dust-cli52>

(This has no styles attached as they aren't relevant)

When you load up this, it seems to render fine, but after a moment, the `xs` property on L.18 gets a red error underline and hovering over it reveals the error.

In my application, the app just crashes with the TS error.

Replace the `sheetColWidth` on L.18 with a permitted number, the error goes away and everything is fine.

Bit confused as the value of the variable is one of the enumerated permitted values in the Grid interface.

I tried string interpolation for the hell of it, but then it's rejected for being a string, as it should be:

```
xs={`${sheetColWidth}`}

```

I tried casting the value to a string and back to a number - this changed nothing, and quite right:

```
const sheetColWidth = parseInt(sheets.length > 3 ? 3 : 12 / sheets.length + '');

```

I'm stumped.

Any insight greatly appreciated.