代码之家 › 专栏 › 技术社区 › redberry

反应语义Ui按钮悬停

semantic-ui reactjs css javascript

redberry · 技术社区 · 6 年前

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

1 回复 | 直到 6 年前

Mosè Raguzzini 6 年前

可能元素的路径无效,请检查我的代码段:

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

推荐文章

Shea · 如何在语义UI React中实现多选过滤器下拉列表

6 年前

andcl · 语义UI React-为卡片中的图像添加显示效果

6 年前

Alexander Dischberg · 使用数组或字符串设置选定的语义UI下拉列表

6 年前

user6039980 hvgotcodes · 语义UI:如何使用javascript在下拉列表中设置值列表?

6 年前

nobody · 从贴图渲染的React dim元素

6 年前

user8934737 · 如何在语义ui反应中循环?

7 年前

mayorsanmayor · 具有React语义UI的响应式分段布局

7 年前

Searene · 在语义UI React的下拉列表中以编程方式选择项目

7 年前

Snkini · 如何基于mongoDB数据增加语义UI进度条?

7 年前

Evanss · 使用React语义UI使用NavLink设置活动页面类?

7 年前