Как правильно ввести тему, переданную в качестве реквизита методу styled() в пользовательском интерфейсе материалов? (Машинопись)

Я использую Material UI с его стилизованной функцией для стилизации компонентов, таких как:

const MyThemeComponent = styled("div")(({ theme }) => `
  color: ${theme.palette.primary.contrastText};
  background-color: ${theme.palette.primary.main};
  padding: ${theme.spacing(1)};
  borderRadius: ${theme.shape.borderRadius};
`);

Это работает, но набор текста не работает, показывая поля после написания, как тип any. Итак, мы остались без автозаполнения, подсказок и проверки ошибок.

Как обеспечить правильную работу набора текста в методе styled()?

демо

reactjs typescript material-ui

17.03.2022 22:27

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

это работает для вас https://codesandbox.io/s/themeusage-material-demo-forked-pikixf. Я не могу проверить это должным образом, работает ли автозаполнение в кодах и коробке.

К сожалению, это не так. В предложениях редактора указано, что единственное значение theme.palette — это значения mode и any.

— 18.03.2022 00:43

17.03.2022 22:57

Ответ принят как подходящий

Исправлено с использованием формата Emotion / Styled-Components вместо формата MUI, показанного в документации.

const MyThemeComponent = styled("div")`
  color: ${({ theme }) => theme.palette.primary.contrastText};
  background-color: ${({ theme }) => theme.palette.primary.main};
  padding: ${({ theme }) => theme.spacing(2)};
  border-radius: ${({ theme }) => theme.shape.borderRadius}px;
`;

фиксированная демоверсия

18.03.2022 05:06