Typescript не распознает общий объект для стилей в компоненте в стиле MUI
У меня есть другой стилизованный компонент с некоторыми общими стилями, поэтому я создал функцию, которая принимает theme и возвращает общие стили.
Это выглядит примерно так:
const getCommonStyled = (theme: Theme) => ({
height: '100%',
display: 'flex',
flexDirection: 'column',
padding: theme.spacing(2),
})
const StyledComponent1 = styled('div')(({ theme }) => ({
...getCommonStyled(theme),
color: 'blue'
}))
const StyledComponent2 = styled(Typography)(({ theme }) => ({
...getCommonStyled(theme),
backgroundColor: 'blue'
}))
const StyledComponent3 = styled('span')(({ theme }) => ({
...getCommonStyled(theme),
width: 100,
height: 100,
}))
Это кажется достаточно простым, но Typescript этого не позволит, и его сообщение об ошибке сбивает с толку:
ошибка TS2769: этому вызову не соответствует ни одна перегрузка. Последняя перегрузка выдала следующую ошибку. Аргумент типа '({ тема }: MUIStyledCommonProps & ClassAttributes & HTMLAttributes & { ...; }) => { ...; }» нельзя присвоить параметру типа «TemplateStringsArray».
Как мне ввести getCommonStyled, чтобы эти ошибки исчезли?
@RyanCogswell Я обновил getCommonStyled, чтобы он соответствовал стилю, используемому в моем реальном коде.
И в этой заметке, у меня есть еще один подобный случай с той же проблемой с той же ошибкой TS, которая является const breakWord = { wordBreak: 'break-word', wordWrap: 'break-word' }. Ни те, ни другие не нравятся...
flexDirection — это важная часть, которой не хватало в коде, который вы изначально разместили. Я отвечу в ближайшее время.
Ответы 1
Когда вы явно не указываете тип возвращаемого значения для getCommonStyled, TypeScript выводит следующее:
const getCommonStyled: (theme: Theme) => {
height: string;
display: string;
flexDirection: string;
padding: string;
}
Это прекрасно работает для любых свойств CSS, где определение TypeScript допускает строковые значения, но определение для flexDirection более конкретное:
Из https://github.com/frenic/csstype/blob/v3.1.2/index.d.ts#L18882:
export type FlexDirection = Globals | "column" | "column-reverse" | "row" | "row-reverse";
Я бы порекомендовал исправить это, указав тип возвращаемого значения React.CSSProperties:
const getCommonStyled = (theme: Theme): React.CSSProperties => ({
height: '100%',
display: 'flex',
flexDirection: 'column',
padding: theme.spacing(2),
})
React.CSSProperties использует пакет csstype, как и типы MUI для стилизованного API, поэтому MUI распознает распространение этого типа как совместимое. Указание этого возвращаемого типа также приведет к более быстрой проверке типа этого метода (например, вы получите ошибку TypeScript непосредственно в getCommonStyled, если вы установите flexDirection на что-то, отличное от одного из допустимых значений).
это работает отлично! Большое спасибо за дополнительное объяснение того, почему это происходит с определенными стилями :)
Пожалуйста, убедитесь, что вы можете воспроизвести проблему с точным кодом, указанным в вашем вопросе - я не могу. Я подозреваю, что для его воспроизведения необходимо что-то дополнительное (обозначенное
// etcв вашем вопросе).