[英]How to style Toolbar with MUI v5 with 'styled' instead of 'makeStyles' with this class instance?
I'm a newbie to JS, ReactJS, and MUI.我是 JS、ReactJS 和 MUI 的新手。 I was following a tutorial on building a simple ReactJS webpage, but looks like the person was using MUI v4 and now that MUI v5 is out, a few of the APIs and tools used in the tut are outdated (withStyles, makeStyles).
我正在按照有关构建简单 ReactJS 网页的教程进行操作,但看起来该人使用的是 MUI v4,现在 MUI v5 已经发布,tut 中使用的一些 API 和工具已过时(withStyles、makeStyles)。 Around 10:46 in the video, he is showing how he is creating classes to stylize each part of the Toolbar.
在视频的 10:46 左右,他展示了他如何创建类来对工具栏的每个部分进行样式化。
I'm trying to figure out how I could accomplish the same stylizing for the Toolbar and its Typography components using that same exact structure, via injecting it with className?我想弄清楚如何通过使用 className 注入工具栏及其排版组件,使用相同的结构完成相同的样式化?
My Code:我的代码:
Navbar.js导航栏.js
import React from 'react'
import logo from '../assets/logo.svg' // imported assets for the navbar
import logoMobile from '../assets/logoMobile.svg'
import { Toolbar, Typography } from '@mui/material' // these two needed for toolbar
import { styled } from '@mui/material'
import CustomButton from './CustomButton'
const styles = styled({
bar:{ // class name
paddingTop: "1.15rem",
backgroundColor: "#fff",
['@media (max-width:780px)']:{flexMedia: "column"}, // media queries - for different devices and web-browser sizes
},
// logo: {
// width: "15%",
// ['@media (max-width:780px)']: {display: "none"},
// },
// logoMobile:{
// width: "100%",
// display: "none",
// ['@media (max-width:780px)']: {display: "inline-block"},
// },
menuItem: {
cursor: "pointer",
flexGrow: 1,
"&:hover": {color: "#4f25c8"},
['@media (max-width:780px)']: {paddingBottom: "1rem"},
}
})
function NavBar() {
const classes = styles()
return (
<Toolbar position="sticky" color="rgba(0, 0, 0, 0.87)" className={classes.bar}>
{/* <img src={logo} className={classes.logo}/>
<img src={logoMobile} className={classes.logoMobile}/> */}
<Typography variant="h5" className={classes.menuItem}>
About Me
</Typography>
<Typography variant="h5" className={classes.menuItem}>
Projects
</Typography>
<Typography variant="h5" className={classes.menuItem}>
Resume
</Typography>
<Typography variant="h5" className={classes.menuItem}>
Contact Me
</Typography>
<CustomButton txt="a test button!"></CustomButton>
</Toolbar>
)
}
export default NavBar
And here's what it ends up looking like这就是它最终的样子
vs what it should look like与它应该是什么样子
I tried utilizing {styled } from '@mui/material'
but I can only get the toolbar to show.我尝试使用
{styled } from '@mui/material'
但我只能显示工具栏。 But it will not apply the styling expected, from the video -- confused as to why?但它不会应用视频中预期的样式 - 对为什么感到困惑? Also this question accomplishes the same task , but it doesn't do it the way that I'm asking about.
这个问题也完成了同样的任务,但它并没有按照我要求的方式来完成。
Because styled
create custom components with additional styles, it attaches the styles without specifying and adding class names manually.因为
styled
使用额外的 styles 创建自定义组件,所以它附加了 styles 而无需手动指定和添加 class 名称。
Here is a quick example for a styled
version of your code: (live demo on: stackblitz )这是代码
styled
版本的快速示例:(现场演示: stackblitz )
First use styled
to create some custom components, in this case based on the MUI components Toolbar
and Typography
, with some styles attached to them.首先使用
styled
创建一些自定义组件,在本例中基于 MUI 组件Toolbar
和Typography
,并附有一些 styles。
// 👇 This component based on Toolbar
const MyToolbar = styled(Toolbar)(({ theme }) => ({
paddingTop: '1.15rem',
backgroundColor: '#fff',
color: 'rgba(0, 0, 0, 0.87)',
position: 'sticky',
// 👇 Optional: consider to use theme.breakpoints for this
['@media (max-width:780px)']: { flexDirection: 'column' },
}));
// 👇 This component based on Typography
const MyItem = styled(Typography)(({ theme }) => ({
cursor: 'pointer',
flexGrow: 1,
'&:hover': { color: '#4f25c8' },
// 👇 Optional: consider to use theme.breakpoints for this
['@media (max-width:780px)']: { paddingBottom: '1rem' },
}));
While the media queries works in here, perhaps consider to use the breakpoints syntax with theme
for a potentially cleaner solution.虽然媒体查询在这里工作,但也许考虑使用带有
theme
的断点语法以获得可能更清洁的解决方案。
// 👇 Optional: replaces @media line in MyToolbar
[theme.breakpoints.down('md')]: { flexDirection: 'column' }
// 👇 Optional: replaces @media line in MyItem
[theme.breakpoints.down('md')]: { paddingBottom: '1rem' }
Otherwise, if it is in some (less common) situations that theme
is not needed, then {theme}
could be omitted in styled
syntax, for example:否则,如果在某些(不太常见的)情况下不需要
theme
,则{theme}
可以在styled
语法中省略,例如:
// 👇 Only when theme is not needed
const MyToolbar = styled(Toolbar)({
paddingTop: '1.15rem',
backgroundColor: '#fff',
color: 'rgba(0, 0, 0, 0.87)',
position: 'sticky',
['@media (max-width:780px)']: { flexDirection: 'column' },
});
// 👇 Only when theme is not needed
const MyItem = styled(Typography)({
cursor: 'pointer',
flexGrow: 1,
'&:hover': { color: '#4f25c8' },
['@media (max-width:780px)']: { paddingBottom: '1rem' },
});
After attached with styles, the components MyToolbar
and MyItem
can then be used in the output, for example:绑定styles后,组件
MyToolbar
和MyItem
就可以在output中使用了,例如:
<MyToolbar>
<MyItem variant="h5">About Me</MyItem>
<MyItem variant="h5">Projects</MyItem>
<MyItem variant="h5">Resume</MyItem>
<MyItem variant="h5">Contact Me</MyItem>
<Button>Custom Btn</Button>
</MyToolbar>
Note that the inline styles position="sticky" color="rgba(0, 0, 0, 0.87)"
does not work here, and is moved to the above styled
.请注意,内联 styles
position="sticky" color="rgba(0, 0, 0, 0.87)"
在这里不起作用,并移至上面styled
。 If inline styles are needed, consider use the sx
prop .如果需要内联 styles,请考虑使用
sx
属性。
Hope this will help.希望这会有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.