React Navbar 汉堡包图标无法绝对定位到右侧

Question

我正在制作一个带有汉堡菜单图标的 React 导航栏，但我不明白为什么我的图标不能绝对定位在右侧。 Chrome 开发工具指示我的汉堡图标（div 元素）上的 Top 和 Right 属性（以及任何其他 margin/padding 属性）都是无效的属性值我的导航菜单本身能够完全定位在右侧。

Navbar.jsx:

import React, { useState } from 'react';
import NavIcon from './NavIcon';
import NavMenu from './NavMenu';
import './navbar.css';

const Navbar = () => {
  const [isOpen, setIsOpen] = useState('false');

  return (
    <nav>
      <NavIcon isOpen={isOpen} setIsOpen={setIsOpen} />
      <NavMenu isOpen={isOpen} setIsOpen={setIsOpen} />
    </nav>
  );
};

export default Navbar;

NavMenu.jsx:

import React from 'react';
import NavItem from './NavItem';
import './navbar.css';

const NavMenu = ({ isOpen }) => {
  const slideIn = {
    transform: () => isOpen ? 'translateX(1)' : 'translateX(0)'
  };

  return (
    <ul className='Navbar__menu' isOpen={isOpen} style={slideIn}>
      <NavItem title='Home' />
      <NavItem title='About' />
      <NavItem title='Contact' />
    </ul>
  );
};

export default NavMenu;

NavIcon.jsx:

import React from 'react';
import './navbar.css';

const NavIcon = ({ isOpen, setIsOpen }) => {
  const toXTop = {
    transform: isOpen ? 'rotate(-45deg) translate(-5.25px, 6px)' : 'none'
  };
  const toXMid = {
    opacity: isOpen ? '0' : '1'
  };
  const toXbottom = {
    transform: isOpen ? 'rotate(45deg) translate(-5.25px, -6px)' : 'none'
  };

  return (
    <div className='Navbar__icon' isOpen={isOpen} onClick={() => setIsOpen(!isOpen)}>
      <div className='Navbar__icon--bars' style={toXTop} />
      <div className='Navbar__icon--bars' style={toXMid} />
      <div className='Navbar__icon--bars' style={toXbottom} />
    </div>
  );
};

export default NavIcon;

NavItem.jsx:

import React from 'react';
import './navbar.css';

const NavItem = ({ title }) => {
  return (
    <div className='Navbar__menu--item'>
      { title }
    </div>
  );
};

export default NavItem;

navbar.css:

.Navbar__icon {
  display: block;
  position: absolute;
  top: 5;
  right: 5;
  z-index: 1;
  cursor: pointer;
}    

.Navbar__icon--bars {
    width: 25px;
    height: 4px;
    background-color: #666;
    border-radius: 5px;
    margin: 4px 0;
    transition: 0.2s;
}    

.Navbar__menu {
  position: absolute;
  width: 15em;
  height: auto;
  right: 0;
  list-style: none;
  background-color: #000;
}

.Navbar__menu--item {
  font: 1rem Arial, sans-serif;
  color: #999;
  margin: 1em;
  cursor: pointer;
}

App.js 只渲染 Navbar.jsx 组件。

如有任何建议，我们将不胜感激。谢谢。

Answer 1

React 中的 Top/Left/Right/Bottom 属性值似乎不支持无单位数值，因为这个问题已通过向我的值添加 px 单位解决。

React Navbar 汉堡包图标无法绝对定位到右侧

React Navbar Hamburger Icon unable to be Positioned Absolutely to Right

css-position

absolute

navbar

reactjs

hamburger-menu