即使在插入组件后，如何显示带有样式组件图标的图标？ （盖茨比）

Posted 2023-03-15

【中文标题】即使在插入组件后，如何显示带有样式组件图标的图标？ （盖茨比）

【英文标题】：How to display Icons with the styled-component icons that are hidden even after being inserted into the component? (GATSBY)

【发布时间】：2020-09-10 19:33:11

【问题描述】：

我正在尝试在旁边显示图标。下面是 styled-components 代码及其逻辑的组织方式，但默认情况下不显示图标。一个奇怪的行为是，如果我直接在图标组件旁边写任何东西，它就会开始显示它，但大小不同。

菜单栏组件

index.js

import React from 'react';


import  Home  from '@styled-icons/material-rounded/Home'
import  Search  from '@styled-icons/icomoon/Search'
import  Lightbulb  from '@styled-icons/fa-solid/Lightbulb'
import  Grid  from '@styled-icons/boxicons-solid/Grid'
import  ToTop  from '@styled-icons/boxicons-solid/ToTop'

import * as S from './styled'

const MenuBar = () => (
  <S.MenuBarWrapper>
    <S.MenuBarGroup>
      <S.MenuBarLink to="/" title="Back to Home">
        <S.MenuBarItem><Home /></S.MenuBarItem>
      </S.MenuBarLink>
      <S.MenuBarLink to="/search/" title="Search">
        <S.MenuBarItem><Search /></S.MenuBarItem>
      </S.MenuBarLink>
    </S.MenuBarGroup>
    <S.MenuBarGroup>
      <S.MenuBarItem title="Change Theme"><Lightbulb /></S.MenuBarItem>
      <S.MenuBarItem title="Change Visualization"><Grid /></S.MenuBarItem>
      <S.MenuBarItem title="Go to Top"><ToTop /></S.MenuBarItem>
    </S.MenuBarGroup>
  </S.MenuBarWrapper>
)

export default MenuBar

styled.js

import styled from 'styled-components'
import  Link  from 'gatsby'

export const MenuBarWrapper = styled.aside`
  align-items: center;
  background: #192734;
  border-left: 1px solid #38444d;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: space-between;
  padding: 0.8rem 0;
  position: fixed;
  right: 0;
  width: 3.75rem;
`

export const MenuBarGroup = styled.div`
  display: flex;
  flex-direction: column;
`

export const MenuBarLink = styled (Link)`
  display: block;
`
export const MenuBarItem = styled.span`
  display:block;
  color: #8899a6;
  cursor: pointer;
  height: 3rem;
  padding: 1.1rem;
`

MenuBar aside without showing icons

当我在组件附近键入一些文本时：

MenuBar aside showing icons

【问题讨论】：

你能确定为图标设置宽度吗？也许没有文字，它不知道有什么？

@windmaomao 设置宽度解决了问题！谢谢！

【参考方案1】：

我推荐你使用材质图标库。 （不是材料 ui 图标）。非常大的库，并且有通过 em 大小更改大小并解决您的问题的道具。

【讨论】：

感谢您的提示 sajjadatma。设置图标的宽度也解决了问题。