如何使用此 class 实例使用“样式化”而不是“makeStyles”为带有 MUI v5 的工具栏设置样式？

Question

我是 JS、ReactJS 和 MUI 的新手。 我正在按照有关构建简单 ReactJS 网页的教程进行操作，但看起来该人使用的是 MUI v4，现在 MUI v5 已经发布，tut 中使用的一些 API 和工具已过时（withStyles、makeStyles）。 在视频的 10:46 左右，他展示了他如何创建类来对工具栏的每个部分进行样式化。

我想弄清楚如何通过使用 className 注入工具栏及其排版组件，使用相同的结构完成相同的样式化？

我的代码：

导航栏.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

这就是它最终的样子

与它应该是什么样子

我尝试使用{styled } from '@mui/material'但我只能显示工具栏。 但它不会应用视频中预期的样式 - 对为什么感到困惑？ 这个问题也完成了同样的任务，但它并没有按照我要求的方式来完成。

Answer 1

因为styled使用额外的 styles 创建自定义组件，所以它附加了 styles 而无需手动指定和添加 class 名称。

这是代码styled版本的快速示例：（现场演示： stackblitz ）

首先使用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' },
}));

虽然媒体查询在这里工作，但也许考虑使用带有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' }

否则，如果在某些（不太常见的）情况下不需要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' },
});

绑定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>

请注意，内联 styles position="sticky" color="rgba(0, 0, 0, 0.87)"在这里不起作用，并移至上面styled 。 如果需要内联 styles，请考虑使用sx属性。

希望这会有所帮助。