CSS 悬停在此 React 组件中的任何地方都不起作用

Question

我现在正在开发一个简单的 react 组件，而我通常在样式表中使用的 CSS:hover 并且始终有效，但实际上在该组件的任何地方都不起作用。我试图了解可能导致它的原因。将不胜感激任何帮助。这是组件。

import React, { Component } from 'react';
import './index.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faEdit } from '@fortawesome/free-solid-svg-icons';
import { faTrash } from '@fortawesome/free-solid-svg-icons';

class MenuSearchOutput extends Component {
  render(){
    return(
      <div className="menuSearchOutputRoot">
          <div className="menuSearchOutputVoidLeft"></div>
          <div className="menuSearchOutputLeft">Burgers</div>
          <div className="menuSearchOutputRight">
              <FontAwesomeIcon id="menuSearchElementEdit" icon={faEdit}/>
              <FontAwesomeIcon id="menuSearchElementDelete" icon={faTrash}/>
          </div>
      </div>
    )
  }
}

export default MenuSearchOutput;



 .menuSearchOutputRoot{
        display:flex;
        flex-direction:row;
        align-items:center;
        height:50px;
        width:100%;
        background-color:lightcyan;
        border-bottom: solid cyan 1px;
    }
    .menuSearchOutputVoidLeft{
        height:50px;
        width:2%;
    }
    .menuSearchOutputLeft{
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        height:32px;
        width: 68%;
        background-color:white;
        color:black;
    }
    .menuSearchOutputRight{
        display:flex;
        flex-direction:row;
        justify-content:space-evenly;
        align-items:center;
        height:50px;
        width:30%;
    }
    #menuSearchElementDelete:hover{
        opacity:0.8;
        cursor:pointer;
    }
    #menuSearchElementEdit:hover{
        opacity:0.8;
        cursor:pointer;
    }

Answer 1

您可能会收到一个错误，因为 id 变量不存在。

export function FontAwesomeIcon(props: Props): JSX.Element

export interface Props {
  icon: IconProp
  mask?: IconProp
  className?: string
  color?: string
  spin?: boolean
  pulse?: boolean
  border?: boolean
  fixedWidth?: boolean
  inverse?: boolean
  listItem?: boolean
  flip?: FlipProp
  size?: SizeProp
  pull?: PullProp
  rotation?: RotateProp
  transform?: string | Transform
  symbol?: FaSymbol
  style?: CSSProperties
  tabIndex?: number;
  title?: string;
}

parent 可以在 div 中定义。

<div className="menuSearchOutputRight">
 <div id="menuSearchElementEdit">
  <FontAwesomeIcon  icon={faEdit}/>
 </div>
 <div id="menuSearchElementDelete">
  <FontAwesomeIcon  icon={faTrash}/>
 </div>
</div>