如何显示带有样式化组件图标的图标，即使它们已插入到组件中，样式图标也被隐藏了？ （GATSBY）

由 发布于

我正在尝试在旁边显示图标。以下是样式化组件代码及其逻辑的组织方式，但是默认情况下未显示图标。一个奇怪的行为是，如果我在图标组件旁边直接编写任何内容，它将开始以不同的大小显示它。

MenuBar组件

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