Блог

в настоящее время для оформления моих значков в библиотеке «react-иконки» я использую » IconContext.Метка поставщика. Однако есть ли для меня решение динамически изменять размер значка в зависимости от размера моего носителя ?

Является ли единственным решением сделать это только с помощью глобальной таблицы стилей? Я избегаю этого, так как я только начал использовать NextJS, и я не хочу, чтобы мой стиль мог столкнуться с другим стилем. Поэтому я разделяю их на модули.

Спасибо.

NavBar.Модуль.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 = () =gt; {  return (  lt;divgt;  lt;nav className={styles.headerInner}gt;  lt;div className={styles.siteTitleWrapper}gt;  lt;h1 id="site-title" className={styles.siteTitle} gt;lt;Link href='/'gt;Hong Sheng Yanglt;/Linkgt;lt;/h1gt;  lt;/divgt;    lt;div className={styles.mainNavigation}gt;  lt;IconContext.Provider value={{ size: '1em', style:{marginLeft:'3em',marginRight:'0.5em', color:'#000'}}}gt;  {navItems.map((item) =gt; (  lt;div className={styles.NavItemsWrapper}gt;  lt;Link href={item.link}gt;  lt;span style={{display:'flex'}}gt;  lt;item.icon/gt;  lt;p className={styles.NavItems}gt;  {item.category}  lt;/pgt;  lt;/spangt;  lt;/Linkgt;  lt;/divgt;  ))}   lt;/IconContext.Providergt;   lt;/divgt;  lt;/navgt;   lt;/divgt;  ) }  export default NavBar   

Я сделал «npm, я реагирую-реагирую» и импортировал в свой код следующее

 import { useMediaQuery } from 'react-responsive'  

Кроме того, я объявил размеры для мобильного телефона и телефона с 2 константами

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

Наконец, я использую медиа-запрос, чтобы проверить размер экрана и применить его соответствующим образом

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