0

我试图在旁边显示图标。下面是 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

样式化的.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 放在一边，不显示图标

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

MenuBar 除了显示图标

4

1 回答 1

0

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

于 2020-05-24T02:27:23.277 回答