如何在 <IconContext.Provider> 中动态更改图标的大小

Question

目前，为了在 'react-icons' 库下设置我的图标样式，我使用了 'IconContext.Provider' 标签。但是，有没有解决方案可以让我根据媒体的大小动态更改图标的大小？

仅使用全局样式表来执行此操作的唯一解决方案是什么？我正在避免它，因为我才刚刚开始使用 NextJs，我不希望我的风格与其他风格发生冲突。因此，我将它们分成模块。

谢谢。

NavBar.Module.Css

@import url("https://fontlibrary.org//face/metropolis");

.siteTitleWrapper {
  box-sizing: border-box;
  display: table-cell;
  vertical-align: middle;
}

.siteTitle {
  font-family: "MetropolisRegular";
  font-weight: 600;
  font-style: normal;
  font-size: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #000;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1em;
  white-space: nowrap;
}

.headerInner {
  padding: 20px 0;
  display: table;
  width: 100%;
}

.mainNavigation {
  text-align: right;
  position: relative;
  z-index: 1000;
  display: block;
}

.NavItemsWrapper {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
}

.NavItems {
  font: "MetropolisRegular";
  font-weight: 600;
  font-style: normal;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
}

@media only screen and (max-width: 830px) {
  .mainNavigation {
    -webkit-font-smoothing: subpixel-antialiased;
    display: inline-flexbox;
    position: fixed;
    bottom: 64px;
    left: 0;
    height: auto;
    width: 100%;
    background-color: #f7f7f7;
    overflow: hidden;
    text-align: center;
    vertical-align: top;
  }

  .NavItems {
    display: none;
  }

}

NavBar.tsx

import Link from 'next/link'
import styles from '../styles/components/NavBar.module.css'
import {HiHome} from 'react-icons/hi'
import {FaBloggerB} from 'react-icons/fa'
import {AiOutlineFundProjectionScreen} from 'react-icons/ai'
import {BsPersonBadge} from 'react-icons/bs'
import {IconContext} from 'react-icons'
import { IconType } from 'react-icons/lib'

interface navItemsTypes {
    icon: IconType,
    category: string,
    link: string
}

const navItems : navItemsTypes[] = [
    {icon: HiHome, category: 'Home', link: '/'},
    {icon: AiOutlineFundProjectionScreen, category: 'Projects', link: '/projects'},
    {icon: FaBloggerB, category: 'Blogs', link: '/blogs'},
    {icon: BsPersonBadge, category: 'About', link: '/about'},
]


const NavBar = () => {
    return (
    <div>
        <nav className={styles.headerInner}>
            <div className={styles.siteTitleWrapper}>
            <h1 id="site-title" className={styles.siteTitle} ><Link href='/'>Hong Sheng Yang</Link></h1>
            </div>
            
            <div className={styles.mainNavigation}>
                <IconContext.Provider value={{ size: '1em', style:{marginLeft:'3em',marginRight:'0.5em', color:'#000'}}}>
                    {navItems.map((item) => (
                        <div className={styles.NavItemsWrapper}>
                            <Link href={item.link}>
                                <span style={{display:'flex'}}>
                                    <item.icon/>
                                    <p className={styles.NavItems}>
                                        {item.category}
                                    </p>
                                </span>
                            </Link>
                        </div>
                    ))}

                </IconContext.Provider>             
            </div>
        </nav>   
    </div>
    )
}

export default NavBar

Answer 1

我执行了“npm i react-responsive”并在我的代码中导入了以下内容

import { useMediaQuery } from 'react-responsive'

另外，我用 2 const

声明了移动尺寸和 phone

const phoneViewNav = {
size: '1em',

}

const DesktopViewNav = {
    size: '1.5em',
}

最后，我使用媒体查询来检查屏幕尺寸并相应地应用

const NavBar = () => {
    
    const isDesktopOrLaptop = useMediaQuery({maxWidth:830})
    const iconSize = isDesktopOrLaptop ? phoneViewNav : DesktopViewNav
    const router = useRouter();
    
    return (
    <div id="nav">
    ....
        <IconContext.Provider value={{ size: iconSize.size, style:{color:"#000"}}}> ...
    </div> )}

如何在 <IconContext.Provider> 中动态更改图标的大小

How to dynamically change the size of icon in <IconContext.Provider>

css

reactjs

next.js

react-icons