在 nextjs 中设置标题样式。 - 材料 ui ReactJs 应用程序答案

【问题标题】：Style the header in a nextjs. - material ui ReactJs app在 nextjs 中设置标题样式。 - 材料 ui ReactJs 应用程序
【发布时间】：2020-11-04 23:19:39
【问题描述】：

我有一个 react/nextjs 应用程序，并且有 Home|account|Jobs 导航。如何加粗导航中的活动链接？使用下面的代码，活动链接不是粗体。

我正在使用材质 UI -- 工具栏

感谢您的帮助

import ListItem from "@material-ui/core/ListItem";
import withStyles from "@material-ui/core/styles/withStyles";
...
const StyledLink = withStyles(Link)`
  font-weight: bold;
`;
    class Header extends React.Component {
    ...
      this.state = {
        currentIndex: null
      }
     }
     const menuData = [
       {
         href:"/jobseeker/home",
         tabContent: "Home"
       },
        {
         href:"/jobseeker/account",
         tabContent: "Account"
       },
         ...
    ]
    
    handleSelect = (index) => {
     this.setState({ currentIndex:index });
    }
    render() {
       const { currentIndex } = this.state;
       
        
       {menuData.map((menu,index) => (
         
          <ListItem key={index} onClick={(() => this.handleSelect(index)}>              
           <Link prefetch href={menu.href}>
               <a className={currentIndex === index ? StyledLink:''} >{menu.tabContent}</a>
            </Link>                  
        </ListItem>
    
        ))}
    }}

【问题讨论】：

nextjs.org/docs/api-reference/next/router
谢谢。你知道如何让它与我所拥有的一起工作

标签： reactjs material-ui next.js

【解决方案1】：

你可以在Official next.js docs之后创建ActiveLink组件

import { useRouter } from 'next/router'

function ActiveLink({ children, href }) {
  const router = useRouter()
  const style = {
    marginRight: 10,
    color: router.pathname === href ? 'red' : 'black',
  }

  const handleClick = (e) => {
    e.preventDefault()
    router.push(href)
  }

  return (
    <a href={href} onClick={handleClick} style={style}>
      {children}
    </a>
  )
}

export default ActiveLink

【讨论】：