React Semantic Ui Button hover

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

Can you post the css code you used to override the semantic's one ? I work with semantic ui for react every day so I may help — Mosè Raguzzini
– Mosè Raguzzini, Commented Sep 10, 2018 at 12:47
.ui.inverted.black.segment.Change:hover { background-color: #202020 !important; color: #202020 !important; } @MosèRaguzzini — redberry
– redberry, Commented Sep 10, 2018 at 13:05
Try with .ui.inverted.black.segment.Change button:hover as path as your current path will affect only Button.Group — Mosè Raguzzini
– Mosè Raguzzini, Commented Sep 10, 2018 at 13:11
does not work, the hover & active state are still white @MosèRaguzzini — redberry
– redberry, Commented Sep 10, 2018 at 13:14

Mosè Raguzzini · Accepted Answer · 2018-09-10 13:25:59Z

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

answered Sep 10, 2018 at 13:25

Mosè Raguzzini

15.9k1 gold badge34 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

redberry Over a year ago

Love it! Thanks!

redberry Over a year ago

What would be the way to change the active button color. I mean when button is selected?

Mosè Raguzzini Over a year ago

You're welcome, mate! Same code ... instead of ":hover", ":active".

Collectives™ on Stack Overflow

React Semantic Ui Button hover

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related