在一个要迭代的组件中使用‘makeStyles`有成本吗(比如一个列表项)？
在一个要迭代的组件中使用makeStyles是没有成本的。makeStyles是Material-UI库中的一个函数，用于创建可重用的样式。它基于JSS（JavaScript Style Sheets）实现，允许您以JavaScript对象的形式定义样式，并将其应用于组件。
使用makeStyles的主要优势是可以轻松地将样式与组件关联起来，并在组件中进行重用。它提供了一种简洁而灵活的方式来定义和管理组件的样式，使得代码更易于维护和扩展。
在一个要迭代的组件中使用makeStyles可以帮助您实现以下目标：
- 分离关注点：通过将样式与组件分离，可以更好地组织和管理代码。这样，您可以专注于组件的功能和逻辑，而不必担心样式的细节。
- 提高可重用性：通过将样式定义为可重用的函数，可以在多个组件中共享和重用它们。这样，您可以避免重复编写相似的样式代码，并减少代码量。
- 实现动态样式：
makeStyles允许您根据组件的状态或属性动态地生成样式。这使得您可以根据需要更改组件的外观，提供更好的用户体验。 - 提高性能：
makeStyles使用JSS的内联样式生成，可以在运行时动态生成CSS类名。这种方式可以减少网络请求和渲染时间，提高应用程序的性能。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云容器服务（TKE）、腾讯云对象存储（COS）。
腾讯云产品介绍链接地址：
相关·内容
我知道要设计材料UI组件的样式，我应该使用它们的useStyles，比如： const useStyles = makeStyles(themes => ({
root: {
marginTop: '15px',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
flexGrow: '0'
},
menuButton: {
浏览 12提问于2019-08-25得票数 1
回答已采纳
我想知道是否有一种不用使用theme.customElements.acitonButton就可以在MyComponent中访问makeStyles的方法？例如，我可以以某种方式输入className={theme.customElements.actionButton}？吗
theme.js
const theme = createMuiTheme({
customElements: {
actionButton: {
backgroundColor: '#007AFF'
}
}
})
export default theme
浏览 1提问于2020-11-11得票数 0
我想在某些断点上显示/隐藏元素，比如我将如何使用Bootst相图或。
我在这里的文档中看到了我们添加的
display={{ xs: 'block', md: 'none' }}
为我们的元素干杯。我已经这样做了，但我没有任何结果-没有隐藏/显示元素，没有错误，没有编译问题。
有人知道这是怎么做的吗？
我的代码是：
import React from 'react'
import PropTypes from 'prop-types'
import makeStyles from '@material-ui/core/st
浏览 6提问于2020-03-19得票数 3
回答已采纳
2回答
我正在使用Material v5，并试图迁移到使用styled而不是makeStyles，因为这似乎是现在“首选”的方法。我知道使用makeStyles仍然有效，但我尝试采用新的样式解决方案。
我有一个表示导航链接的列表项目列表，我想突出显示当前选中的项目。下面是我如何使用makeStyles实现的
interface ListItemLinkProps {
label: string;
to: string;
}
const useStyles = makeStyles<Theme>(theme => ({
selected: {
浏览 3提问于2021-08-06得票数 5
回答已采纳
在我的表项目中有一个组件--我需要在几个地方显示这个表--使用这个组件时必须重写样式，有时甚至要添加列或修改名称，这是一个很好的实践，或者您有更好的实践来实现这一点。比如继承。谢谢
浏览 2提问于2022-12-04得票数 0
回答已采纳
2回答
我试图通过使用classes道具来覆盖Mui样式。
例如，我想重写组件的颜色。
我想使用makeStyles的一个定义，它将设置所有css规则，从根开始(TextField)，并在将它传递给classes支柱中的组件时，覆盖层次结构中的任何东西(例如，聚焦时的InputLabel )。
怎么做的？
import * as React from "react";
import TextField from "@mui/material/TextField";
import makeStyles from "@mui/styles/makeStyles
浏览 14提问于2022-01-04得票数 0
回答已采纳
当我使用MATERIAL时，我发现我还可以在功能组件中定义const useStyles：
import React, { useEffect, useState } from 'react';
import { Container, makeStyles } from '@material-ui/core';
const Welcome = ({highlight}) => {
const useStyles = makeStyles(theme => ({
root: {
display: 'flex',
浏览 4提问于2022-06-07得票数 0
回答已采纳
我有一个清单，比如说，20个项目。它们中的每一个都是3列的方框，就像网格格式一样。
网格上方是允许您显示和隐藏列表中不同项目的选项，具体取决于您要查找的内容。
当用户隐藏特定列表项时，这些列表项会淡出，而所有其他列表项则会捕捉到它们的新位置。
在平滑淡出效果之后，捕捉动作看起来不太好。它们是让元素滑入新位置的方法吗？
谢谢。
浏览 0提问于2010-07-29得票数 0
回答已采纳
我是第一次接触material UI。在学习的过程中，我逐渐了解到材料UI的样式可以被类的规则名称覆盖。
如果我有一个element - MenuItem，我只需要改变文本的默认样式(比如fontFamily，fontWeight，fontSize)
根据这里提供的文档，我使用了makeStyles钩子，并覆盖了菜单项的根元素的一些属性
示例代码
const useStyles = makeStyles((theme) => ({
menuItem: {
fontFamily: "Raleway",
}
}));
JSX co
浏览 17提问于2021-05-16得票数 0
回答已采纳
我使用App.js中的makeStyles钩子为组件添加样式。目前，我在一个组件中使用了三个makeStyles钩子。是否可以通过使用一个主钩来应用三个钩子的样式。我不确定我是否使用了最好的方法。如果有人能帮我，我将不胜感激。 App.js const useStyles = makeStyles({
btn: {
paddingTop: 10,
paddingBottom: 10,
paddingLeft: 45,
paddingRight: 45,
fontWeight: 600
},
gridMargin: {
margin: &
浏览 12提问于2021-04-30得票数 1
1回答
现在，我用React Framework和Material-UI的库做了一个项目。
来自的我的模板-->登录
我将组件从函数组件更改为类组件以使用this.state。因为我想从键盘中获取值。可是，我不会呀。
这是错误的
这是我的代码
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
},
}));
class Signin extends Component {
constructor(props) {
super(props);
this.st
浏览 1提问于2020-03-12得票数 0
1回答
当用useStyles()创建不同的道具时，它们可以在elemens中访问，比如 const useStyles = makeStyles((theme) => ({
title: {
margin: theme.spacing(4, 0, 2)
}
)
return (
<Typography className={classes.title}>text</Typography>
) 但是，如果我尝试记录内容，它会返回一个字符串makeStyles-title-7 function App() {
const
浏览 39提问于2020-04-16得票数 0
1回答
我用的是反应和材料-UI。有什么方法可以导出从React.Component建立的类吗？我想使用一些像状态这样的反应变量。如果这是不可能的，我如何使用状态？
实际代码(工程)：
import React from 'react';
import { Typography } from '@material-ui/core';
import { makeStyles } from '@material-ui/styles';
const styles = makeStyles(() => ({
style1: {
f
浏览 3提问于2020-11-18得票数 0
回答已采纳
我正在尝试更改MaterialUI表的字体颜色，但似乎无法使用makeStyles()。在MUI的文档中，有一个使用withStyles()更改字体颜色的示例，但为了便于学习，我想知道如何使用makeStyles更改字体颜色。另外，我想问一下，在某些特定的情况下，建议使用withStyles()而不是makeStyles()，或者相反。 我的组件如下： const useStyles = makeStyles({
table: {
minWidth: 650,
fontSize: 20,
color: 'red',
},
{...}
fun
浏览 22提问于2021-03-23得票数 1
回答已采纳
我使用createMuiTheme()制作了customTheme，并在<ThemeProvider>中使用了它。现在，我想在makeStyles()函数中使用该customTheme创建一些自定义样式。但是makeStyles()收不到我的customTheme。它获取默认的主题。
代码：
import React from 'react';
import { createMuiTheme, makeStyles, ThemeProvider } from '@material-ui/core';
const customTheme = cre
浏览 13提问于2021-06-01得票数 0
回答已采纳
我使用的材料Ui版本5.2.7。当我从makeStyles导入@mui/materials/styles时，我会得到以下错误-
Uncaught Error: MUI: makeStyles is not longer exported from @mui/material/styles. You have to import it from @mui/styles. See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.
他还说，@mui/styles在梅版本5中是不推荐的，所以我很困惑如何导
浏览 35提问于2022-01-07得票数 10
回答已采纳
如何将自定义道具传递给MUI组件？假设我想要传递customProps='red'，这会改变组件的背景色吗？
在我的例子中，我需要为一个按钮添加一个不同的背景色，我想添加这样的内容：
<SubmitButton
variant={"outlined"}
customBackground={'red'} // this prop
>
Submit
</SubmitButton>
我应该使用makeStyles吗？
是密码箱。
浏览 3提问于2021-10-21得票数 2
回答已采纳
这个问题的目的是了解在引擎盖下发生了什么。每次我在makeStyles()中找到代码时，我都觉得我只是在做一个纯拷贝粘贴，而不知道在幕后发生了什么。因此，我想在这里张贴一个问题，以便有人可以帮助我。
我在许多反作用应用程序中都看到了下面的代码。当我们给makeStyles()打电话时，我很想知道发生了什么。因此，我跳过了它的定义，但我无法理解它是什么意思。有人能帮我理解如何阅读/理解它吗？
我在这里了解的是，我正在传递一个参数为theme的函数。在传递这个函数之后，我完全不知道发生了什么。如果有人也能帮我解决这个问题，我很感激。
// Calling makeStyles()
const us
浏览 0提问于2019-07-26得票数 14
每一个都有不同的用例吗？什么时候应该通过makeStyles使用withStyles？
浏览 0提问于2019-08-29得票数 27
回答已采纳
1回答
我试图在reactJS的MUI中使用typescript，但它一直给我这个错误，我试图卸载MUI包，然后重新安装它，但没有任何变化，它没有给我任何错误，所以很难说出为什么会发生这个错误
TypeError: Cannot read properties of undefined (reading 'primary')
我对MUI进行了以下设置
我的主题配置
export type Mode = "dark" | "light";
declare module '@mui/material/styles' {
interfa
浏览 1提问于2021-10-26得票数 1
我有一个组件，它只会作为列表的一部分呈现。让我们称它为MyListItem。从编码的角度来看，最简单的事情就是将const useStyles = makeStyles(...)本地化到MyListItem内部。但是在这种情况下，如果有100个列表项，那么我可能会调用useStyles 100次。
通常，我只会说去它，并将useStyles放在父对象中(例如MyList)，然后将classes向下传递给MyListItem。这样，useStyles只计算一次，而不是100次。
但是，MyListItem可以由多个父级调用(例如，MyListOne、MyListTwo)。这意味着任何想要调用My
浏览 4提问于2020-05-09得票数 2
回答已采纳
我正在开发一个ReactJS应用程序，我可以通过两种方式从库中导入类。第一个是使用一个import子句并在方括号中指定我想要的类：
import { makeStyles, CssBaseline, Box } from '@material-ui/core';
第二个是在不同的import子句中指定每个类：
import makeStyles from '@material-ui/core/makeStyles';
import CssBaseline from '@material-ui/core/CssBaseline';
import B
浏览 9提问于2020-01-01得票数 6
回答已采纳
你知道梅和className的道具有什么区别吗？由于booth所做的事情与我所能说的一样，请注意，我并不是在询问组件中的类变量，这可能会引起混淆。
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
'& > *': {
//margin: theme.spacing(0.5),
},
padding: 0,
},
const SomeComponent: React.FC<Prop
浏览 6提问于2021-12-18得票数 1
回答已采纳
在中，有一个makeStyles函数，可以用来获得定制的CSS样式。
如果我没有在特定的CSS中使用主题，我应该使用它吗？
例如：
import React from "react";
import { TextField, Paper, Button, Box } from "@material-ui/core";
const classes = {
paper: {
backgroundColor: "#eee",
marginLeft: "30%",
marginRight: &#
浏览 0提问于2019-09-04得票数 19
回答已采纳
3回答
我正在创建一个Webpage。我使用Material UI作为组件。以下是守则：
import { makeStyles, Typography } from "@material-ui/core";
const useStyles = makeStyles((theme) => ({
container: {
backgroundColor: "white", display: displayStyle
},
}));
export default function HomePage() {
const cl
浏览 12提问于2021-12-22得票数 3
回答已采纳
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回答
lst = [(32,(4,5)),(55,(5,6))]
给定一个元组(4,5)，所以我想删除lst中的第一个元组。如何做到这一点？
对不起，这不是很清楚，我的意思是删除每个列表项中的第二个列表项
浏览 0提问于2011-01-10得票数 1
回答已采纳
我正在构建一个具有材料UI的组件。我使用的是默认的主题文件(按照这里的)。
我知道我可以从makeStyles的主题中引入某些值：
import { makeStyles, Theme } from '@material-ui/styles';
const useStyles = makeStyles((theme: Theme) => ({
something: {
color: theme.palette.common.black,
},
}));
这很好用。
但是如何将这些相同的值用于样式化的材质UI组件呢？例如：
import withStyle
浏览 7提问于2020-05-07得票数 0
我创建了一个标题菜单。它仍然工作在材料-UI V4。但我最近更新为资料用户界面V5。但是我有一个错误: TypeError:无法读取未定义(读'down')的属性
import makeStyles from "@mui/styles/makeStyles";
import { Theme } from "@mui/system";
// NOTE: Styling header bar components
const useStyles = makeStyles((theme: Theme) => ({
title: {
浏览 4提问于2021-09-18得票数 3
2回答
我是第一次接触Material UI。我正在使用react，既使用类也使用函数组件。但是当我在类组件中使用Material UI组件和像makeStyles这样的特性时，它抛出了一个钩子错误，要求您不能在类组件中使用钩子。我知道钩子是一个新特性，但我喜欢使用类组件，所以我不想使用钩子，但仍然希望使用material UI。有什么办法吗？我被卡住了。 当我使用下面的代码时，出现了错误： const useStyles = makeStyles({
card: {
minWidth: 275,
},
bullet: {
display: '
浏览 27提问于2019-06-23得票数 2
我对ReactJS非常陌生，我很难理解不同的组件如何相互通信。
我确实有一个组件将呈现一个列表，并且每个列表项都是一个不同的组件。我想把部件尽量小一点。
现在，每个列表项都可以有一个名为active的属性，如果属性设置为true，则会添加一个额外的类。
这是定义组件中单个项的类。
请参见下面定义单个列表项的组件的代码：
export default class OfficeRibbonTab extends React.Component {
constructor(props) {
super(props);
this.state = {
active:
浏览 4提问于2016-06-04得票数 5
回答已采纳
1回答
有谁能解释一下如何在材料UI5中传递defauklt主题吗？
在材料UI6中，我经常这样做
const useStyles = makeStyles((theme) => ({
home: {
display: "flex",
paddingTop: "8rem",
width: "100vw",
height: "100vh",
backgroundColor: theme.palette.primary.dark,
color: "white",
}
浏览 12提问于2022-03-17得票数 1
回答已采纳
我想为当前组件中的所有<p>添加一个规则。我在任何地方都找不到信息(资料-ui文档，堆栈溢出等等)关于如何按标记名称添加CSS规则。
不支持吗？
我想做这样的事：
const useStyles = makeStyles((theme: Theme) =>
createStyles({
'p': {
margin: 0,
},
someClass: {
fontSize: 14,
},
})
);
编辑：
使用Ryan的解决方案可以工
浏览 4提问于2020-04-21得票数 12
回答已采纳
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
回答已采纳
1回答
我有自己的主题，我可以很好的主题。现在，我有三种不同风格的材料UI标签。这就是我需要使用makeStyles更改样式的原因。
这是我需要更改的选项卡的示例。
...
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
width: "100%",
backgroundColor: theme.pallete.primary
},
tabs: {
/// some styles
}
...
}
));
...
<Tabs
...someProp
浏览 9提问于2020-02-17得票数 0
1回答
下面的代码起作用：
我所有的上下文都很好，我可以搜索一张卡片，api给我结果，但是我不知道为什么CardsTemplate不更新列表，当我尝试一个console.log(cardsList)或者在加载时，它不更新，现在有谁可以解决这个问题？
import { Grid } from "@mui/material";
import { useCardsContext } from "hooks";
import { CardShow } from "components/Items";
import { makeStyles } from
浏览 2提问于2022-07-25得票数 0
我不知道这里的正确方法是什么。如果我用每个组件创建makeStyles样式，还是应该在基本组件中创建一个样式并传递类名，可以吗？
浏览 1提问于2021-02-19得票数 0
回答已采纳
我刚刚加入了一个开发React应用程序的团队。我们目前依赖于材料UI，包括makeStyles，来设计应用程序。我的任务之一就是弄清楚我们的全球主题。在我的传统中，我一直依赖于LESS和SCSS来实现应用程序样式和主题架构。 与切换主题架构使用makeStyles相比，坚持使用Material use (除了它已经实现的事实之外)有优势吗？
浏览 26提问于2020-01-12得票数 2
回答已采纳
3回答
无法使用className覆盖Button上的样式。相同的样式在TextField上正确工作。使用style支持可以覆盖Button样式。我遗漏了什么？
发行链接：
相同代码
import React from "react";
import { Button, TextField } from "material-ui";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
buttonSt
浏览 6提问于2021-02-08得票数 0
2回答
我用的是反应路由器和材料界面。我把路线与我的材料UI持久化抽屉列表项目与一些自定义样式，就像我点击一个列表项目，它突出显示它。但是，当我刷新页面时，我面临一个问题--我所选择的列表项会被重置，即使我仍然在同一页面上。有人能告诉我，即使页面被刷新，我如何持久化所选的列表项？
Inshort：问题-当我刷新页面时，我的抽屉列表项目被选中的颜色被重置为最上面的项目，即使我在同一个页面上。
这是我要展示的问题。
这是我的沙箱代码
下面是相同的代码
注意：，我建议您浏览我的代码沙箱，这样在代码中查找会更好。谢谢
App.js
import { Switch, Route } from "r
浏览 3提问于2021-05-01得票数 0
回答已采纳
我在material的react库中使用makeStyles()函数，并得到以下错误
只能在函数组件的主体内调用钩子。
下面是我正在使用的代码类型的一个示例。
const useStyles = makeStyles(theme => ({
container: {
display: 'flex',
flexWrap: 'wrap',
},
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
},
dens
浏览 3提问于2019-10-17得票数 4
回答已采纳
比如说，在数据流任务中，我有一个OLE DB源。我想提高SSIS的性能。我选择更少的列重要吗？
在数据库中创建一个选择较少列的视图，使用该视图作为源。
在源中键入SELECT以选择较少的列。
选择表，然后取消对源中列的勾选。
谢谢
浏览 3提问于2012-10-31得票数 0
回答已采纳
2回答
我正在使用material ui的卡片和cardContent组件。我在功能组件中都有，并且正在尝试覆盖每个组件的根样式。但是，我不知道如何修改cardContent组件的css。似乎是通过修改卡片的根样式来实现的。它不会让我修改cardcomponent的根样式。相反，我的css在检查器中显示为 .jss14 {
height: 100%;
display: flex;
padding: 0;
flex-direction: column;
justify-content: space-between;
} 而不是在.MuiCardContent-r
浏览 12提问于2021-01-11得票数 1
回答已采纳
目前，当我有这样一个v-for循环时：
<li v-for="record in records">
<my-vue-list-item :vue-title="record.title"></my-vue-list-item>
</li>
我更新驱动v-for的数据(即为records分配一个新值)，它实际上并不根据新的数据创建新的列表项。它只是更新列表项组件组件上的一些属性。
这是。尝试展开其中一个按钮(例如，单击“展开Apple")，然后单击"Set 2”以查看即使列表项切换，组件仍保
浏览 1提问于2017-05-05得票数 2
回答已采纳
我有一个包含多个行和列的DataSet (就像DataSets倾向的那样)。我需要在底部创建一个计数行，其中包含每个列的和。我想用一个LINQ表达式来做这件事，因为它将简化我的一堆代码。我可以得到这样一列的总数：
var a = (from m in month
where <some long expression>
select m["BGCO_MINUTES"] as Decimal?).Sum();
但是，我也想要其他列的总数。我不想使用多个LINQ表达式，因为其中还有一个复杂的where子句，我正在用不同的表达式做几行计
浏览 2提问于2012-07-07得票数 1
回答已采纳
我通常使用makeStyles来编写样式，但是现在我不得不使用MUI表，在它的文档样式中，样式由withStyles完成。有人能分辨出他们有什么不同吗？
浏览 2提问于2020-08-08得票数 0
回答已采纳
我正在使用Next.js的材料用户界面。
我已经创建了一个图标，当单击它时，它调用setOpenFn()并将打开的变量设置为true。然后将这个变量作为道具传递给useStyles()。现在，如果打开为true，则显示搜索栏。但我得到了以下错误
webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:67 Warning: Prop `className` did not match. Server: "makeStyles-search-3 makeStyles-search-8" C
浏览 1提问于2021-09-14得票数 0
2回答
有人能帮我解决这个问题吗。这是代码：
import { AppBar } from "@mui/material";
import { makeStyles } from "@mui/styles";
const useStyles = makeStyles({
root: {
backgroundColor: 'red'
}
})
const App = () => {
const classes = useStyles();
return <>
<A
浏览 11提问于2021-12-22得票数 -1
2回答
在这里，您可以看到在react组件之外使用material样式的示例。
import React from 'react';
import { makeStyles } from '@material-ui/styles';
import Button from '@material-ui/core/Button';
const useStyles = makeStyles({
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)'
浏览 0提问于2019-03-14得票数 3
我的材料-ui选择组件与样式的组件，而不是材料类的样式。我使用的材料-ui/核心4.12.3。
例如，如果我从材料中使用旧的makeStyles组件并创建我自己的类，那么它工作得很好，例如内联或通过menuProps进行样式设计。
作品
const useStyles = makeStyles((theme) => ({
icon: {
top: 0,
marginRight: '1px',
},
selectRoot: {
'&:focus': {
backgroun
浏览 11提问于2022-03-17得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
