是否可以为凸起按钮添加自定义悬停颜色？

6 回答

• 1

  我能够通过向 RaisedButton 组件提供 className prop并使用 !important 指令在css中指定 :hover 属性来解决此问题 .

  在您的组件中：

  ...
  <RaisedButton className="my-button" />
  ...
  

  在你的CSS中：

  .my-button :hover {
    background-color: blue !important;
  }
  

  回复于 2024-05-02T11:20:48+08:00
• 0

  我使用window.eventlistener来点击事件来覆盖我的叠加层

  window.addEventListener("load",addClickHandlers,false);
  function addClickHandlers(event) {
  var someElement = document.getElementById("an_id");
  someElement.addEventListener("click",myClickHandler,false);
  }
  
  function myClickHandler(event) {
  ... do stuff ...
  }
  

  回复于 2024-05-02T11:20:48+08:00
• -1

  对于凸起的按钮使用此支柱hoverColor所以它将是这样的

  <RaisedButton 
     label="Default" 
     hoverColor={"#00ff00"} 
  />
  

  回复于 2024-05-02T11:20:48+08:00
• 0

  在RaisedButton的渲染功能中， overlay 样式对象被 overlayStyle prop覆盖 . （相关摘录如下） .

  <div
    ref="overlay"
    style={prepareStyles(Object.assign(styles.overlay, overlayStyle))}
  >
    {enhancedButtonChildren}
  </div>
  

  这意味着您可以通过设置 overlayStyle 道具的 backgroundColor 来设置背景颜色 . 我认为第二个难题是设置 onMouseLeave 和 onMouseEnter 事件，并通过在鼠标进入或离开按钮区域时更改颜色来自己管理当前背景颜色 .

  不幸的是，看起来键盘焦点事件没有在MaterialUI API中公开钩子，因此如果不修改库，您将无法处理这种情况 .

  如果您采用修改库的路线，这可能值得向MaterialUI提交拉取请求 .

  回复于 2024-05-02T11:20:48+08:00
• 0

  相当简单的解决方案：

  .yourButtonClass{
    color: aColor !important;
    &>span{
      color: anotherColor;
    }
  }
  

  您可以将颜色应用于更改标签和叠加颜色的按钮，然后将标签放在一个范围内，您可以为其指定文本所需的颜色 . 这样你的背景，标签和叠加可以是不同的颜色:)

  也可以用相应标签的style属性编写：

  <md-button class="md-raised" style="color: aColor !important">
      <span style="color: anotherColor">yourLabel</span>
  </md-button>
  

  回复于 2024-05-02T11:20:48+08:00
• 0

  您可以使用jquery简单地删除class和addClass

  jQuery(document).ready(function($){
    $('#test').hover(
       function(){ $(this).addClass('redclass') },
       function(){ $(this).removeClass('overlay') }
     )
   });
  

  '#test表示id， . test表示您尝试操作的元素的类 .

  回复于 2024-05-02T11:20:48+08:00