javascript - react 语义 Ui 按钮悬停

Question

我最近开始做 React 编程，目前正在做侧边栏导航。我正在为我的网站使用 React Semantic UI，并且我有用于导航的按钮。但是有一个问题我找不到解决方案，我试图禁用按钮上的悬停效果并且我尝试了多种方法(例如将一个类分配给 Button Group/div 并尝试从 CSS 访问它)但没有运气。这是我的代码任何建议将不胜感激

  import React, { Component } from "react";
    import { Button, Icon } from "semantic-ui-react";
    import "../styles/DotNav.css";

    export default class DotNav extends Component {
     state = { activeItem: "home" };

  handleContextRef = contextRef => this.setState({ contextRef });

  handleItemClick = (e, { name }) => this.setState({ activeItem: name });

  render() {
    return (
      <div style={{ position: "fixed", marginLeft: 1370, marginTop: 100 }}>
        <Button.Group vertical className="ui black Change">
          <Button basic>
            <Icon name="minus" color="white" />
          </Button>
          <Button className="btn" basic>
            <Icon name="minus" color="white" />
          </Button>
          <Button basic>
            <Icon name="minus" color="white" />
          </Button>
        </Button.Group>
      </div>
    );
  }
}

Answer 1

也许你的元素路径无效，检查我的代码片段:

https://codepen.io/anon/pen/QVQjMY

const {
  Button,
  Container,
  Divider,
  Header,
  Icon,
  Message,
} = semanticUIReact

class App extends React.Component {
  render() {
    return (
      <Button.Group vertical className="ui black change">
          <Button>
            <Icon name="minus" color="white" />
          </Button>
          <Button className="btn">
            <Icon name="minus" color="white" />
          </Button>
          <Button>
            <Icon name="minus" color="white" />
          </Button>
        </Button.Group>
    )
  }
}

// ----------------------------------------
// Render
// ----------------------------------------
const mountNode = document.createElement('div')
document.body.appendChild(mountNode)

ReactDOM.render(<App />, mountNode)

body {
  background-color: red;
}

.ui.black.change button:hover{
  background-color: teal!important;
}