javascript 如何使用MUI v5将工具栏的样式设置为“styled”而不是“makeStyles”(使用此类示例)？

hrirmatl 于 2022-12-10 发布在 Java

关注(0)|答案(1)|浏览(255)

我是JS、ReactJS和MUI的新手。我在一个tutorial上创建了一个简单的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'，但我只能显示工具栏。但它不会应用视频中预期的样式--困惑于为什么？还有this question accomplishes the same task，但它不会像我所问的那样。

JavaScript

来源：https://stackoverflow.com/questions/74738970/how-to-style-toolbar-with-mui-v5-with-styled-instead-of-makestyles-with-this

1条答案

按热度按时间

jchrr9hc1#

由于styled创建具有附加样式的自定义组件，因此它无需手动指定和添加类名即可附加样式。
下面是一个styled版本代码的快速示例：（现场演示：（第10页）
首先使用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，以获得可能更干净的解决方案。

const MyToolbar = styled(Toolbar)(({ theme }) => ({
  paddingTop: '1.15rem',
  backgroundColor: '#fff',
  color: 'rgba(0, 0, 0, 0.87)',
  position: 'sticky',
  // 👇 Optional: use breakpoints from theme
  [theme.breakpoints.down('md')]: { flexDirection: 'column' },
}));

const MyItem = styled(Typography)(({ theme }) => ({
  cursor: 'pointer',
  flexGrow: 1,
  '&:hover': { color: '#4f25c8' },
  // 👇 Optional: use breakpoints from theme
  [theme.breakpoints.down('md')]: { paddingBottom: '1rem' },
}));

否则，如果在某些（不太常见的）情况下不需要theme，则可以在上述语法中省略{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属性。
希望这会有所帮助。

赞(0）回复(0）举报 2022-12-10

我来回答

javascript 如何使用MUI v5将工具栏的样式设置为“styled”而不是“makeStyles”(使用此类示例)？

1条答案

相关问题

热门标签

最新问答