Change styling on hover semantic-ui-react components

问题

if I set up a className for certain components like

<Segment className="Change" color='blue' inverted></Segment>

and in my css I use

.Change:hover{
  background-color: black; //or any other change on hover
}

nothing is overriden on the hover.

I have also noticed there are many other components that refuse changes of mine, seemingly randomly. One semantic component will let me change a width the next will not. Is the cause from the same issue? How do I override the color on a hover?

回答1:

After reviewing the source code of Segment Component (github), I found it has two default classes: segment and ui. In addition, you used two props color=blue and inverted. So I would recommend using the following code.

.ui.segment.blue.inverted.Change:hover {
  background-color: black !important;
}

Working DEMO

回答2:

Choose any color semantic-ui provide for example:

<Form>
      <Form.Input label="Email" type="email" />
      <Form.Input label="Password" type="password" />
      <Button color="teal" type="submit">
        Sign In
      </Button>
</Form>

Your button appears like:

You can add inverted props inside Button component that react semantic-ui provide

<Form>
      <Form.Input label="Email" type="email" />
      <Form.Input label="Password" type="password" />
      <Button inverted color="teal" type="submit">
        Sign In
      </Button>
</Form>

your component appears like:

On hover returns to basic style opposite of inverted

styled components usage with react semantic ui

I recommended you to use styled-components in order to override semantic-ui component style

import { Tab, Form, Button, Grid, Icon } from "semantic-ui-react";
import styled from "styled-components";

const Mybutton = styled(Button)`
 &:hover {
    color: #fff !important;
 }
`;

Next use your new styled component instead of semantic-ui

<Mybutton inverted color="teal" type="submit">
   Sign In
</Mybutton>

回答3:

Because you didn't provide more code, hard to guess what overriding style you try to change. Try to add !importanant rule to this style.

.Change:hover {
  background-color: black !importanant;
}

To avoid !important, which is not always a good solution, add a more specific CSS selector, for exaple Segment.Change:hover.

UPDATE: Try to remove color='blue' from the template and check if will work with and without !important rule.

来源：https://stackoverflow.com/questions/48842489/change-styling-on-hover-semantic-ui-react-components

标签

css

reactjs

semantic-ui

semantic-ui-react