useStyles在mui5中不能正常工作吗？
在Mui5中，useStyles不是一个有效的函数或方法。Mui5是一种用于构建用户界面的UI框架，它提供了一系列的组件和工具来简化前端开发。如果您想在Mui5中使用样式，可以使用它提供的内置样式方案，如styled组件或makeStyles钩子。
styled组件是一种在Mui5中定义和应用样式的方式。您可以使用它来创建自定义组件，并将样式直接应用于组件。下面是一个示例：
import { styled } from '@mui/system';
const CustomButton = styled('button')({
backgroundColor: 'blue',
color: 'white',
padding: '10px',
});
function MyComponent() {
return <CustomButton>Click me</CustomButton>;
}makeStyles钩子是另一种在Mui5中处理样式的方式。它允许您定义样式对象，并返回一个生成的样式类名，您可以将其应用于组件。下面是一个示例：
import { makeStyles } from '@mui/styles';
const useStyles = makeStyles({
root: {
backgroundColor: 'blue',
color: 'white',
padding: '10px',
},
});
function MyComponent() {
const classes = useStyles();
return <button className={classes.root}>Click me</button>;
}这些是Mui5中处理样式的常见方法，您可以根据自己的需求选择适合您的方式。由于我们的限制，我无法给出腾讯云相关产品的链接地址，但您可以通过腾讯云的官方文档或网站，查找与前端开发、云原生等相关的产品和解决方案。
相关·内容
2回答
我正试图使用makeStyles和react一起使用material对我的文件进行样式化。它适用于我的一些页面，但即使我使用的是与tha backgroundColor相同的样式元素，大多数页面也无法工作。在下面的代码中，只有正在工作的pageTitle。
import { Card, Paper, Typography } from '@mui/material'
import { makeStyles } from '@mui/styles';
import React from 'react'
const useStyles = mak
浏览 10提问于2022-02-18得票数 0
我正在尝试自定义样式我的图标添加一个更大的字体大小，背景工作良好，但字体大小不是，我读到我可以使用重要！但是我想知道为什么它不工作，因为它已经在版本4中工作了。 const useStyles = makeStyles((theme: Theme) => ({
root: {
flexGrow: 1,
},
icon: {
fontSize: 140,
backgroundColor: 'red',
'&:hover': {
backgroundColor: 'red'
浏览 9提问于2021-11-15得票数 0
回答已采纳
我使用的是带有reactjs的MUI5，我想使用makeStyles向MUI组件添加一些自定义的CSS，但它不允许我在MUI样式中使用默认主题，所以我的代码如下：
import { Grid, Card, CardContent,Typography, CardActions,Button, AppBar, Toolbar,
Box,IconButton, Menu, MenuItem, InputBase, alpha, styled, Badge, Container, CardHeader,
CardMedia } from '@mui/material';
imp
浏览 16提问于2022-02-27得票数 0
我想做的是：
我试图通过传入一个包含属性(如EnhancedTable、headCellBackgroundColor、bodyCellColor、bodyCellBackgroundColor等)的样式对象，为用户提供为headCellColor组件提供自定义样式的选项，这些属性可用于为TableHead和TableBody中的单元格着色。
在TableHead组件中，我使用TableSortLabel的方式类似于他们在这个材料-ui文档示例中所做的工作：
我希望自定义颜色的文本和箭头图标在悬停和活动时，根据支持提供的用户。
让我们看看TableSortLabel在不同情况下的颜色:文本的颜
浏览 1提问于2019-06-20得票数 3
1回答
MUI扩展按钮道具
、、、
我想扩展MUI5组件并使用它们的component属性。要根据documentation执行此操作，我将在以下代码中使其工作： import Button, { ButtonProps } from '@mui/material/Button';
import React from 'react';
export type MyButtonProps<C extends React.ElementType> = ButtonProps<C, { component?: C }> & {
myOtherField: st
浏览 24提问于2021-10-25得票数 0
错误：
TypeError: Object(...) is not a function
13 | import { connect } from 'react-redux';
14 |
15 |
> 16 | const useStyles = makeStyles(theme => ({
17 | ...theme
18 | }));
19 |
代码：
const useStyles = makeStyles(theme => ({
...theme
}));
为什么我会得到上面的错误？
一切正常，但突然间我得
浏览 6提问于2020-08-04得票数 2
回答已采纳
我只是遇到了一个问题，无法在react function组件中使用材料UI加载CSS。虽然我把它修好了，但我还是很好奇为什么。在开始时，我编写了类似这样的代码，将makeStyles和useStyles都放在function组件中。然后，我发现类名被正确地分配给了元素，但是没有加载css。
import makeStyles from "material-UI"
import styles from "styles.js"
export default function alertPage() {
const useStyles = makeStyles(
浏览 2提问于2020-11-19得票数 0
我有一个打开onMouseEnter的模式，它工作得很好，然而，当用户停止在按钮上悬停时，我在关闭它时遇到了麻烦。
下面是我的组件：
我尝试将事件侦听器onMouseLeave添加到按钮标记，但它不能正常工作。有什么想法吗？
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-
浏览 7提问于2019-11-07得票数 0
回答已采纳
8回答
我使用的是material ui框架的分隔符组件，而使用的是颜色变化方面。对于这个框架中的大多数其他组件，我可以通过应用useStyles()方法来更改颜色，如下所示：
const useStyles = makeStyles(theme => ({
textPadding: {
paddingTop: 10,
paddingBottom: 10,
color:'white',
},
}));
但是我不能用同样的方法改变分隔符的颜色：
const useStyles = makeStyles(theme => ({
浏览 0提问于2019-10-09得票数 12
1回答
我有两种风格。
一件事包含在特定的组件中，另一件事包含在全局组件中。
例如，假设我们有下面的树。
index.tsx
-App.tsx
-globalConstants.ts
在globalConstants.ts中
import { Theme, makeStyles, createStyles } from '@material-ui/core/styles';
export const sharedStyles = makeStyles((theme: Theme) =>
createStyles({
.
.
.
}),
);
在A
浏览 0提问于2020-03-16得票数 13
回答已采纳
我有一个使用Grid间距的基本5。我希望这种间隔不要发生在xs断点上。如何在xs断点上删除它？
您可以看到一个演示。
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
const useStyles = makeStyles(theme =&g
浏览 0提问于2019-06-26得票数 19
回答已采纳
我想以某种方式在storybook中显示我们的主题对象，但还没有找到一种从组件内部查看主题的方法。 最低限度，我希望像material-ui这样的东西在这里显示主题结构：https://mui.com/customization/default-theme/ 理想情况下，我希望映射通过对象的一部分，并显示颜色，字体大小，字体粗细，间距等类似(但它不能工作，因为你不能访问主题像这样) const useStyles = makeStyles((theme) => theme.palette.primary);
export const Primary = (): JSX.Element
浏览 56提问于2021-10-01得票数 1
我有一个带有输入的表单组件。
const CustomInput = (props) => {
const classes = useStyles(props);
return (
<FormControl className={classes.form}>
<Input
classes={{ input: classes.input, underline: classes.underline }}
/>
</FormControl>
);
};
在useStyles中，我希望通过从道
浏览 1提问于2020-06-15得票数 1
回答已采纳
嗨，我不确定这是一个错误，还是如果有人能帮助我，我很感激。 我将Next.js v10+与Material-UI和React Redux / Redux一起使用。实际上，我有一个Redux Prop传递给了useStyles： const extended = useSelector(state => state.someStore.extended);
const classes = useStyles({
extended
}); 并在makeStyles中使用： toolbar: {
height: props => props.extended ? 180
浏览 26提问于2021-01-23得票数 1
在listItem之外定义的useStyles中有名为TodoListItem的属性，如下所示：
const useStyles = makeStyles(theme => ({
listItem: {
textDecoration: 'none'
}
})
)
const TodoListItem({checked}) => {
const classes = useStyles();
return <ListItemText className={classes.listIt
浏览 4提问于2020-04-24得票数 5
回答已采纳
我已经阅读并尝试了很多解决方案，但我还是个新手，我不知道如何在单击div时添加类{s.highlighted}。有人能给我解释一下吗？这是我的代码，但不是我写的。我更喜欢在单击时将{s.highlighted}添加到"ListItem“中，并将其从之前处于活动状态的元素中删除。
看起来以前的开发人员开始做一些事情，但它不能正常工作。目前，只有“test-helpers”链接始终突出显示。这段代码有什么问题？
const useStyles = makeStyles((theme) =>
createStyles({
link: {
textDecorati
浏览 10提问于2021-03-12得票数 2
回答已采纳
在使用material表组件时，我一直在尝试覆盖muitable-root类，但一直没能让它工作。知道我做错了什么吗？ 风格： const useStyles = makeStyles(theme => ({
root: {
'& .MuiTable-root': {
borderCollapse: 'separate'
}
}
})) 组件调用： <MaterialTable
classes = {useStyles.root}
tableRef = {r
浏览 17提问于2021-01-07得票数 0
2回答
我正在通过使用链接到Javascript来整合第三方的付款表格。
当我将代码放在index.html页面中时，它的工作效果很好，但是当我将代码移动到组件模板时，下面是代码的一部分：
这是初始化支付表单的脚本代码：
<script>
var tokenpay = TokenPay('tokenpay123');
tokenpay.initialize({
dataElement: 'card',
errorElement: 'errorMessage',
amount
浏览 1提问于2021-10-11得票数 0
回答已采纳
当我使用带有onClick属性事件的标准按钮时，它工作得非常好 <Button onClick={handleClose}>
Agree
</Button> 但是我还创建了一个名为ButtonSave的新组件，而onClick无法正常工作 <ButtonSave text="Agree" onClick={handleClose} /> 我在ButtonSave组件中的代码 export default function IconLabelButtons(props) {
const classes = useS
浏览 38提问于2020-01-22得票数 0
回答已采纳
我有一个输入表单开关材料用户界面，我希望轨道和按钮是红色的时候，完全像在。资料用户界面网站上的所有都使用withStyles，但我不知道为什么不能使用useStyles呢？可以用useStyles来做吗？
这里是我的尝试，这是无效的！
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Switch from '@material-ui/core/Switch';
import FormGroup from '@m
浏览 1提问于2021-01-05得票数 0
回答已采纳
我的web应用程序有一种间接填充文本字段的方法，由于它是多次点击(对于上下文来说，这是一个日历)和多个字段，我想显示他们在单击next按钮时填写的字段的用法。
我不能将焦点放在文本字段本身。这将使用户远离他们正在点击的界面。
我把它用于输入，但是我不能让它在文本字段中工作。这是两套具体的代码，我哪里出错了？
TextField (不工作)
import React, { useState, useRef, useEffect } from "react";
import { makeStyles } from "@material-ui/core/styles"
浏览 4提问于2020-02-24得票数 1
回答已采纳
我终于设法让某人使用了mui4，但是在升级了mui5之后，我无法让它开始工作。
Npx sb init —builder webpack5updated sb main.js和一起安装的抱怨说，“可压缩的”模块无法找到，因此无法安装。Ran npm i core-js@3.8.2给出了关于es-弱映射+其他未找到的映射。添加了web pack 5作为开发依赖项npm install webpack@5 --save-devnpx sb@next --prerelease.。
再加上我在网上遇到的所有其他建议，你可以在这些文件中看到(在这些文件中留下一些评论，这样你就可以看到我在某些情
浏览 11提问于2022-04-08得票数 1
由于某些原因，我不能调用useStyles，因为它会输出以下错误： This expression is not callable.
Type 'never' has no call signatures.ts(2349)
const useStyles: never 下面是完整的代码： import { makeStyles, Theme } from "@material-ui/core";
import IconButton from "@material-ui/core/IconButton";
import AppBar from
浏览 110提问于2021-09-25得票数 15
我使用的材料ui步进。
我从那里用过，但它坏了
因此，我在VerticalLinearStepper方法中调试并给出了控制台。
它在这一行console.log上打印一个方法(“useStyles”，useStyles)；
但是我面临一个错误，_react.default.useContext不是一个函数
你能告诉我怎么修吗。
所以以后我会自己解决的。
提供下面的代码片段和沙箱
function VerticalLinearStepper() {
console.log("useStyles----->", useStyles
浏览 0提问于2019-01-09得票数 6
回答已采纳
我正在用React.js做一个简单的应用程序，我试着改变每一项的宽度和背景颜色，以及页面上一行的项数。我使用material-UI进行响应式设计。然后，当我使用Material-UI的断点时，它并没有像我预期的那样工作得很好。 在这些(xs，sm，md，lg)断点中，只有lg可以正常工作，但其他断点根本不能工作。 const useStyles = makeStyles((theme) => ({
userItem: {
height: 200,
margin: 10,
[theme.breakpoints.down('x
浏览 24提问于2021-07-25得票数 1
回答已采纳
2回答
我的网站有一个功能组件-页面，在其中一个页面中，我有一个表，这个表获取API上的数据。为了得到更多的舒适性，表有分页。我正在使用现成的解决方案分页的材料-UI。我的分页工作正常，当我更改页面时，表中的数据正在更改，但URL地址没有变化。我希望能够发送URL与一些param(如GET请求或其他什么)，显示特定页的表。
我试着使用两种解决方案，但都不能满足我的需要
第一个解决方案与路由器。我不确定这是否是我所需要的，因为表中的页面没有单独的页面，表只是从API中获取数据，然后在页面上将它们分开。此外，此解决方案为页面创建链接，但在浏览页面时不更改URL
import React from '
浏览 0提问于2020-12-07得票数 1
回答已采纳
我有这个组件，我正在使用react测试库编写测试用例，当从.module.css文件导入样式时，我面临样式问题，但使用样式组件(style.js)时工作正常。
Demo.js
import styles from 'components/Demo/demo.module.css'
const Demo = () => {
return (
<div>
<p className={styles.newText} data-testid="closeIcon">
hello
</
浏览 2提问于2021-08-04得票数 3
我正在尝试制作一个react组件，其中的背景图像会随着道具的变化而改变。 你有什么办法让它工作吗？ 我正在获取一个对象作为props，其中synmain是指向图像“../image.png”的字符串链接。 const classes = useStyles(props);
const useStyles = makeStyles(theme => ({
mainSection:props =>( {
backgroundImage: "url(props.synmain)",} ...
浏览 28提问于2021-07-18得票数 0
回答已采纳
看来Heroku部署正在移除我对MUI makeStyles文档的所有调用，并随后破坏了我的应用程序的大量外观。在我回去做我所有的内联样式(测试过了--这是有效的)之前，我正在寻找任何关于这方面的智慧。 在我的本地主机视图中，一切看起来都很好。 差异的示例屏幕截图(忽略用户名差异)- ? 下面是我的styles.jsx中的一段代码(我把它剪短了，以使代码的长度合理，但还有更多)： const useStyles = makeStyles(() => ({
//-------------Disclaimer.jsx-------------//
disclaimer:
浏览 24提问于2021-10-27得票数 0
1回答
这可能是一个更大的设计问题，但在我的material ui应用程序中，我试图让所有样式都在CSS中完成(使用makeStyles)，而不是在jsx中进行一些样式(根据material ui文档)和在CSS中进行一些。
到目前为止，我所有的样式都只在css中工作，但我在Paper组件上有一个关键点。我以为这是一个简单的例子，将elevation：'3‘添加到我的useStyles对象(cv__paper)中，但它的工作方式如下所示：
//works as expeted
<Paper className={classes.cv__paper} ele
浏览 14提问于2021-03-02得票数 0
这是一个非常简单的问题，但我就是找不到一个有效的答案。
我将道具传递给makeStyles，如下所示。
const classes = useStyles({ isActive });
然后必须像这样设置属性。
const useStyles = makeStyles((theme) => ({
root: {
color: ({ isActive }) => isActive && "red,
position: ({ isActive }) => isActive && "fixed",
浏览 3提问于2021-09-10得票数 1
我试图将安装到React项目中，但是每当我在终端中运行此命令时：
npm i @mui/styles
它读取以下消息：
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: apollo-music-share@0.1.0
npm ERR! Found: react@18.1.0
npm ERR! node_modules/react
npm ERR! react@"^18.1.0" from the roo
浏览 33提问于2022-06-03得票数 4
3回答
我想分享我的整个网页应用程序的风格。
My Problem:目前正在使用makeStyles，如下所示：
component_A.js
const useStyles = makeStyles({
specific_style: {
padding: '24px',
// etc.
}
})
function foo() {
const classes = useStyles();
return (
<div className={classes.specific_style}>T
浏览 0提问于2020-11-24得票数 1
回答已采纳
我使用的是Materil UI 4.11。我们知道如何使用实质性UI，如果我们想在样式设置中使用varible，我们可以这样做：
const useStyles = makeStyles((theme) => ({
testStyle: {
width: ({ ElementWidth }) => `${ElementWidth * 100}%`,
}
})
在组件内部，我们设置varible并调用类：
const styleProps = {
ElementWidth,
}
const classes = useStyles(stylePr
浏览 6提问于2021-05-28得票数 1
回答已采纳
我已经创建了一个主题，我正尝试在我的useStyles中调用它。这就是主题 import { createMuiTheme } from "@material-ui/core/styles";
const customTheme = createMuiTheme({
palette: {
primary: {
main: "#00ffff"
},
secondary: {
light: "#214b63",
main
浏览 15提问于2020-09-08得票数 0
在demo.js中，我想使用Card以及它的CardHeader，并将单词放在CardContent中。此外，我还将在其他文件中使用CardComponent。如何使CardComponent可重用？
样本代码：
下面是demo.js的代码
import * as React from "react";
import CardComponent from "./CardComponent";
export default function BasicCard() {
return (
<>
<h1>Hello&
浏览 3提问于2022-01-31得票数 0
回答已采纳
2回答
我正在用Formik创建一个带有Materail UI的登录表单，但是Formik不能识别Button of Material UI。如果我用html按钮替换Button，一切都会正常工作。有人能解释一下为什么它不能和Button组件一起工作吗？下面是我的代码：
import React, { ReactElement } from "react";
import TextField from "@material-ui/core/TextField";
import FormControl from "@material-ui/core/FormCon
浏览 14提问于2021-06-02得票数 0
回答已采纳
在常规CSS中，这是一个非常简单的操作，但由于某种原因，这需要通过MUI的useStyles来完成。
基本上，我有一个ListItem，里面有一个ListItemText。如下所示：
const MyComponent = () => {
return (
<ListItem>
<ListItemText primary={'blablablabla'}/>
</ListItem>
)
}
问题是，我需要应用一些只会影响文本本身的ListItemText样式，例如将其颜色更改为红色
浏览 2提问于2021-07-05得票数 0
回答已采纳
1回答
我正试图在类型记录中构建一个react应用程序，并且在正确键入组件时遇到了一些问题。
这是我的密码：
import React from 'react';
import PropTypes, { InferProps } from 'prop-types';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/styles';
import { Typography, Link, Theme } from '@material-ui/core&
浏览 3提问于2020-01-13得票数 1
回答已采纳
目前，我正在处理应用程序中的一个页面，该页面需要在样式设置时访问窗口对象。
我理解，对于不应该在服务器上呈现的组件，只需使用<NoSsr>即可。但是当从useStyles访问窗口时，这是在render()函数之前调用的。这意味着一旦classes=useStyles()被击中，错误就会发生：ReferenceError: window is not defined仍然存在。
知道如何阻止useStyles调用在服务器上呈现吗？
谢谢!
浏览 1提问于2019-09-27得票数 3
回答已采纳
我试图将按钮精确地定位在页面的中央底部，而不考虑该页面中的内容高度。 摘录自我的代码 const useStyles = makeStyles({
button: {
bottom: 0,
right: 0,
position: "absolute"
}
});
export default function Home() {
const classes = useStyles();
return (
<div>
<Box>
<Box>
<
浏览 34提问于2021-11-02得票数 0
这是我正在尝试做的代码片段。当用户登录或注销时，将更新currentUser。 interface StyleAppBar {
backgroundColor: string;
boxShadow: string;
}
const useStyles = makeStyles<Theme, StyleAppBar>((theme) =>
createStyles({
appBar: {
background: (muiProps) => muiProps.backgroundColor,
浏览 19提问于2021-01-02得票数 1
回答已采纳
1回答
我试图改变材料的宽度-ui的抽屉组件在窗口调整大小。在文档中，宽度是像这个classes={{ paper: classes.root }}一样应用的，但问题是不能动态地更改classes.root，因为它是一个常量。
我也尝试用classes={{ paper: {width: drawerWidth } }}设置宽度，但没有运气。
示例：
const useStyles = makeStyles(theme => ({
root: {
width: "70%"
}
}));
funciton Example(props) {
c
浏览 2提问于2019-12-12得票数 2
代码如下
const useStyles = makeStyles(theme => ({
root: {
cursor: "pointer",
color: theme.palette.common.white,
"&:hover": {
backgroundColor: ({ defaultTheme }) =>
defaultTheme ? theme.swatch.green[600] : theme.palette.common.black,
},
backgr
浏览 5提问于2021-06-11得票数 0
回答已采纳
我有一段时间把我的打字正确，所以我很好奇，是否有人有一个工作的例子或一些反馈，我哪里出错了。对于这个createUseStyles实例，我需要做两件事，接受主题和道具。
我以文档网站上的例子为例，当然，它已经抛出了TypeScript错误，这是可以理解的：
(粘贴屏幕截图只是为了显示打字错误)
截图中的代码块：
import React, { ReactNode, CSSProperties } from "react";
import {
createUseStyles,
useTheme,
ThemeProvider,
DefaultTheme,
浏览 6提问于2021-09-09得票数 2
回答已采纳
import {
AppBar,
Avatar,
Badge,
InputBase,
Toolbar,
Typography,
} from "@mui/material";
import React, { useState } from "react";
import { styled, alpha } from "@mui/material/styles";
import { Mail, Notifications, Search } from "@mui/icons-material";
const
浏览 9提问于2022-01-22得票数 3
回答已采纳
const useStyles = makeStyles({
paper: {
color: "var(--text-color) !important",
},
})
CSS变量var(--text-color)在整个应用程序中根据切换进行更改。但是使用此useStyles的组件不会随它而改变。
这里怎么了？
编辑：
这个问题解决了：
<Autocomplete disablePortal />
现在，谁能解释一下原因吗？
浏览 4提问于2022-01-05得票数 0
我正在使用useStyle设置抽屉组件的背景色。如果我设置了background: 'red'，它就能正常工作。但是将其设置为background: 'primary'不起作用。我可能做错什么了？这是我的代码：
const useStyles = makeStyles((theme) => ({
drawer: {
flexGrow: 1,
flexShrink: 0,
},
drawerPaper: {
flexGrow: 1,
background: 'primary',
},
})
浏览 3提问于2020-07-08得票数 2
回答已采纳
2回答
我是第一次接触Material UI。我正在使用react，既使用类也使用函数组件。但是当我在类组件中使用Material UI组件和像makeStyles这样的特性时，它抛出了一个钩子错误，要求您不能在类组件中使用钩子。我知道钩子是一个新特性，但我喜欢使用类组件，所以我不想使用钩子，但仍然希望使用material UI。有什么办法吗？我被卡住了。 当我使用下面的代码时，出现了错误： const useStyles = makeStyles({
card: {
minWidth: 275,
},
bullet: {
display: '
浏览 27提问于2019-06-23得票数 2
我想为当前组件中的所有<p>添加一个规则。我在任何地方都找不到信息(资料-ui文档，堆栈溢出等等)关于如何按标记名称添加CSS规则。
不支持吗？
我想做这样的事：
const useStyles = makeStyles((theme: Theme) =>
createStyles({
'p': {
margin: 0,
},
someClass: {
fontSize: 14,
},
})
);
编辑：
使用Ryan的解决方案可以工
浏览 4提问于2020-04-21得票数 12
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
