[英]Change styling on hover semantic-ui-react components
if I set up a className for certain components like 如果我为某些组件设置className,如
<Segment className="Change" color='blue' inverted></Segment>
and in my css I use 在我的CSS中我使用
.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?
如何覆盖悬停时的颜色?
After reviewing the source code of Segment Component ( github ), I found it has two default classes: segment
and ui
. 在查看Segment Component( github )的源代码之后,我发现它有两个默认类:
segment
和ui
。 In addition, you used two props color=blue
and inverted
. 另外,你使用了两个道具
color=blue
和inverted
。 So I would recommend using the following code. 所以我建议使用以下代码。
.ui.segment.blue.inverted.Change:hover {
background-color: black !important;
}
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 你可以在Button组件中添加反向语义ui提供的反向道具
<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 使用反应语义ui来设计组件的用法
I recommended you to use styled-components in order to override semantic-ui component style 我建议你使用样式组件来覆盖语义ui组件样式
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 接下来使用您的新样式组件而不是语义ui
<Mybutton inverted color="teal" type="submit">
Sign In
</Mybutton>
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. 尝试将
!importanant
规则添加到此样式。
.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
. 为了避免
!important
,这并不总是一个好的解决方案,添加一个更具体的CSS选择器,用于实现Segment.Change:hover
。
UPDATE: Try to remove color='blue'
from the template and check if will work with and without !important
rule. 更新:尝试从模板中删除
color='blue'
,并检查是否可以使用和不使用!important
规则。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.