React / TS / material-ui Использование переменной в качестве значения свойства сетки приводит к ошибкам: «Нет совпадений по перегрузке» и «Тип« число »нельзя назначить для типа ...»

Question

tl; dr: material-ui выдает ошибку TS при использовании переменной в качестве значения свойства сетки xs в JSX

---

Я реализую сетки в Material-UI с React / TypeScript

Я хочу, чтобы ширина конкретного элемента зависела от количества этого элемента.

Это простой расчет, который выводит целое число между 12 и 4:

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

, но когда я использую sheetColWidth (значение 1, 2, 3 или 4, типа number) в качестве значения для xs сетки свойство, TS выдает ошибку:

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

У меня есть сокращенный пример на Codesandbox:

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

(Это не имеет стилей прикреплены, так как они не релевантны)

Когда вы загружаете это, оно выглядит нормально, но через некоторое время свойство xs в L.18 получает красное подчеркивание ошибки и наведение над ним показывает ошибка.

В моем приложении приложение просто вылетает с ошибкой TS.

Замените sheetColWidth на L .18 с разрешенным числом, ошибка исчезает, и все в порядке.

Бит запутан, поскольку значение переменной является одним из перечисленных допустимых значений в интерфейсе Grid.

Я пытался Строковая интерполяция, черт возьми, но она отвергается как строка, как и должно быть:

xs={`${sheetColWidth}`}

Я пытался привести значение к строке и обратно к числу - это ничего не изменило, и Совершенно верно:

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

Я в тупике.

Любое понимание высоко ценится.