reactjs - 如何在没有 ThemeProvider 的情况下使用 MUI v5 makeStyles?
问题描述
我有一个styles.tsx
文件,因为我不想将样式放在我的组件中:
//styles.tsx
import {grey, purple} from '@mui/material/colors';
import {styled, Theme} from '@mui/material/styles';
import {createStyles, makeStyles} from '@mui/styles';
export const drawerStyles = makeStyles((theme: Theme) =>
createStyles({
logo: {
'fontSize': '2em',
'fontFamily': 'Oleo Script Swash Caps',
'background': 'transparent',
'border': 'none',
'marginLeft': theme.spacing(1),
'width': '41px',
'overflow': 'hidden',
'transition': 'all 0.1s ease-out',
'cursor': 'pointer',
'&:hover': {
color: purple[700],
},
},
slide: {
paddingLeft: '8px',
width: '100%',
},
}),
);
在另一个组件中,我导入drawerStyles
:
// drawerContainer.tsx
import {drawerStyles} from 'Src/styles';
export const DrawerContainer = () => {
const classes = drawerStyles();
return (
<Box className={`${classes.logo}>
<p>some text</p>
</Box>
)
代码编译但浏览器返回错误:
MUI:
styles
提供的参数无效。您在上下文中提供了一个没有主题的功能。父元素之一需要使用 ThemeProvider。
在我的index.tsx
我使用ThemeProvider
:
// index.tsx
import {ThemeProvider, StyledEngineProvider} from '@mui/material/styles';
import {theme} from 'Src/theme';
const Root = () => {
return (
<ApolloProvider client={client}>
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<CssBaseline>
<App />
</CssBaseline>
</ThemeProvider>
</StyledEngineProvider>
</ApolloProvider>
);
};
render(<Root />, document.getElementById('root'));
我认为问题在于styles.tsx
不在index.tsx
范围内。因此,当浏览器加载文件时,它没有 themeprovider 上下文。
我应该只移动组件中的所有样式吗?还是有其他方法?
// 编辑 //
使用 styled api 创建了样式:
// styles.tsx
export const Logo = styled(Box)(({theme}) => ({
'fontSize': '2em',
'fontFamily': 'Oleo Script Swash Caps',
'background': 'transparent',
'border': 'none',
'marginLeft': theme.spacing(1),
'width': '41px',
'overflow': 'hidden',
'transition': 'all 0.1s ease-out',
'cursor': 'pointer',
'&:hover': {
color: purple[700],
},
}));
// DrawerContainer.tsx
<Link data-cy='btn_home' to='/'>
<Logo component='button'>Movieseat</Logo>
</Link>
我有点不喜欢这种语法,不清楚是什么类型的对象Logo
。
解决方案
有关更多详细信息,请参阅此答案。简而言之,makesStyles
/withStyles
不再是 MUI v5 中的第一类 API,并计划在 v6 中删除。如果你使用旧的 API,你必须自己添加一个主题。
在 v4 中,您可以从中导入makeStyles
,@material-ui/core/styles
而无需提供自定义主题。您可以在 v5 中执行相同的操作,但只能使用所有 MUI 组件内部使用的新styled
API 。
推荐阅读
- pandas - 如何在数据框的任何列中删除特定值?
- phpstorm - PhpStorm HTML 快捷方式
- firebase - 如何在之前创建的文档中添加字段?
- android - 企业内部的管理 API 和应用程序分发
- javascript - Javascript curl 等价物
- c# - 如何加密和解密多个文件到一个文件?
- google-api - 从另一个 Google Doc 更新 Google Doc 的内容而不创建新文件
- python - AttributeError:Django、Python 中的模块
- java - onCreate() 方法被跳过
- javascript - 从 Hypercube Qlik Sense 混搭中选择尺寸