Я пытаюсь использовать функцию тема.спейсинг Material-UI в приложении React, но функция интервал не распознается.
Сообщение об ошибке Javascript: TypeError: theme.spacing не является функцией
Я не уверен, является ли это ошибкой или у меня что-то не так с установленными версиями фреймворков.
paddingTop: theme.spacing(20)Это устанавливаемые версии фреймворков, согласно файлу пакет-lock.json:
Также нужно быть осторожным с библиотекой эмоций, взаимодействующей с темой вещей.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Что ж, оказывается, это все-таки баг, вызванный запрос №14099.
Исправление уже в пути, поэтому я закрываю этот вопрос.
Попробуй это.
import { makeStyles } from '@material-ui/core/styles'
const userStyles = makeStyles (theme => ({
gridAlign : {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.secondary,
},
})
Попробуйте обновить пакет @material-ui/core до минимальной версии 4.0.0.
Беги npm я @material-ui/[email protected]
Это решило мою проблему.
просто сделайте это следующим образом:
const theme = createMuiTheme({
status: {
danger: orange[500],
},
});
export default function CustomStyles() {
return (
<ThemeProvider theme = {theme}>
<CustomCheckbox />
</ThemeProvider>
);
}
Добавление импорта устраняет ошибку:
import {makeStyles} from "@material-ui/**core**/styles";
Раньше: import { makeStyles } from '@material-ui/core'; работал.
Но теперь в последних версиях пользовательского интерфейса материала нам нужно добавить следующий импорт:
import { makeStyles } from '@material-ui/styles';
Используя MUI версии 5 (V5.0.3), я получаю эту ошибку, потому что импорт makeStyles должен быть
import { makeStyles } from '@mui/styles';
См. документацию здесь: https://mui.com/styles/api/#heading-makestyles-styles-options-крюк
Для материала пользовательского интерфейса версии 5.1.0 у меня сработало следующее (как сказал @Worm)
import { makeStyles } from '@mui/styles';
не забудьте установить @mui/styles
если вы получите предупреждение вроде
MUI: The `styles` argument provided is invalid.
You are providing a function without a theme in the context.
One of the parent elements needs to use a ThemeProvider.
MUI: The `styles` argument provided is invalid.
You are providing a function without a theme in the context.
One of the parent elements needs to use a ThemeProvider.
обернуть родительский контейнер с помощью ThemeProvider
export default ParentComponentName = (props)=>{
return(
<ThemeProvider theme = {theme}>
<SomeThemeComponent>
<SomeComponent />
</SomeThemeComponent>
<ThemeProvider>
)
}
https://mui.com/styles/api/#examples-4
PS: опубликован как новый ответ, так как я не мог комментировать из-за кредитных лимитов.
Это также может быть вызвано переходом с версии 4 на версию 5 пользовательского интерфейса материалов и может быть решено по-разному в зависимости от того, где тема по умолчанию называется stackoverflow.com/questions/67434882/….