反应语义Ui按钮悬停

Question

I have recently started doing React programming and I am currently working on sidebar navigation. I am using React Semantic UI for my website and I have buttons for my navigation. However there is a problem I can't find a solution for, I am trying to disable the hover effect on buttons and I've tried multiple things (assigning a class to Button Group/ div and try to access it from CSS for example) but without luck. Here's my code any suggestions will be appreciated

  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

Maybe your path to element is invalid, check my snippet:

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; }