- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个 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: 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.
在我的 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
是什么类型的对象。
最佳答案
参见this回答更多细节。简而言之,makesStyles
/withStyles
不再是 MUI v5 中的第一类 API,并且计划在 v6 中删除。如果您使用旧的API,则必须自己添加主题。
在 v4 中,您可以 import makeStyles
来自 @material-ui/core/styles
,无需提供自定义主题。您可以在 v5 中执行相同的操作,但只能 with the new styled
API所有 MUI 组件都在内部使用它。
关于reactjs - 如何在没有 ThemeProvider 的情况下使用 MUI v5 makeStyles?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69678265/
我正在学习 MUI,在类(class)中,讲师要求我只设计一个组件而不是整个主题。 为此,它使用 制作样式 功能和传播theme.mixins.toolbar .问题是当我这样做时,出现以下错误: T
我正在尝试为我的 React 组件添加更好的测试覆盖率,而我无法模拟的地方之一就是这个内部 export const useTabStyles = makeStyles(({ options: { c
如何将 makeStyle 类从父组件传递到子组件并将它们与子组件中的 makeStyle 类组合?例如。如下添加断点隐藏到子组件样式。 示例子组件: import React from "react
我做了一些研究,但未能找到解决方案。 我正在尝试使用 createMuiTheme 创建一个主题,并稍后在 makeStyles 中使用它来检索内部的键。 (示例中的调色板)但是,自定义主题似乎没有在
我需要知道如何在选择根时定位“元素” 这是 makeStyles: const useStyles = makeStyles(theme => ({ root:{ '&.select
尽管尝试了多种方法来为 backgroundImage 属性加载图像,但它从未出现在页面中。加载外部图像(例如来自谷歌)按预期工作。 我试过: backgroundImage: `url(${Papy
如何将 Prop 填充值传递给 makeStyles 的关键帧?我必须指定初始状态才能传递 prop 吗? 它适用于颜色但不适用于填充值。 ---Child component const useSt
我正在尝试使用 覆盖 Stepper 组件中的伪类makeStyles : const useStyles = makeStyles((theme) => ({ active: { col
我在一个代码库中工作,随着时间的推移,我们对我们的页面和组件进行了许多更改,因此导致了许多现在没有使用的样式。我们想清理我们的代码库并删除所有未使用的 makeStyles 属性。 我们的样式是从一个
我想知道是否可以使用 MakesStyles 仅将样式应用于子元素,例如在普通的 HTML/CSS 项目中: Title! .parent h1 { color: #f00; } 这将为
我正在尝试处理多个 className(s) 以自定义 HTML 元素的样式,但我不明白如何复制这种情况 .class1.class2 (css) 与 makeStyle react 的方法。 情况很
我正在从事一个需要以下 CSS 代码的元素。 .hexagon, .hexagon::before, .hexagon::after { width: 67px; height: 116px;
我正在从事一个需要以下 CSS 代码的元素。 .hexagon, .hexagon::before, .hexagon::after { width: 67px; height: 116px;
这个问题在这里已经有了答案: Material-UI withStyles doesn't apply any kind of styles (1 个回答) 关闭 3 年前。 当我使用 withSt
我有这个风格 background: "-moz-linear-gradient(180deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 66%,
我刚刚更新到 5.0.0-alpha.25(来自 5.0.0-alpha.10),现在 makeStyles 无法正常工作。我在与它相关的重大更改中找不到任何内容,所以我想知道它是否是一个错误。检查元
我在 CSS/样式方面做得很差,希望能得到一些帮助 我试图根据屏幕宽度更改某些卡片的高度。使用 let mainContainerHeight = window.innerWidth
我需要在 makeStyles 内的多个样式中传播通用样式。这适用于我的 jsx,但是当我移动到 tsx 时会出错。 const abc = { fontWeight: 600, te
这个问题已经有答案了: Internal implementation of "makeStyles" in React Material-UI? (2 个回答) 已关闭 1 年前。 我刚刚开始学习
在 Material-UI ,有 makeStyles 函数可用于获取自定义 CSS 样式。 如果我没有在该特定 CSS 中使用主题,我应该使用它吗? 例如: import React from "r
我是一名优秀的程序员,十分优秀!