javascript - 如何使用带有此类实例的 'styled' 而不是 'makeStyles' 的 MUI v5 设置工具栏样式？

Question

我是 JS、ReactJS 和 MUI 的新手。我在关注 tutorial关于构建一个简单的 ReactJS 网页，但看起来这个人使用的是 MUI v4，现在 MUI v5 已经出来了，tut 中使用的一些 API 和工具已经过时(withStyles，makeStyles)。在视频的 10:46 左右，他展示了他如何创建类来对工具栏的每个部分进行样式化。

我正在尝试弄清楚如何通过使用 className 注入(inject)工具栏及其 Typography 组件，使用完全相同的结构完成相同的样式化？

我的代码:

Navbar.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

这是它最终的样子

与它应该是什么样子

我尝试使用来自“@mui/material”的{styled}，但我只能显示工具栏。但它不会应用视频中预期的样式 - 对为什么感到困惑？还有 this question accomplishes the same task ，但它并没有按照我要求的方式进行。

Answer 1

因为 styled 创建带有额外样式的自定义组件，它附加样式而不需要手动指定和添加类名。

这里是您的代码的样式化版本的快速示例:(现场演示:stackblitz)

首先使用 styled 创建一些自定义组件，在本例中基于 MUI 组件 Toolbar 和 Typography，并附有一些样式他们。

// 👇 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' },
}));

虽然媒体查询在这里工作，也许考虑使用 breakpoints使用 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，则可以在 styled 中省略 {theme} > 语法，例如:

// 👇 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' },
});

附加样式后，组件MyToolbar和MyItem就可以在输出中使用，例如:

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

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

希望这会有所帮助。