0

我在 React 中使用来自“office-ui-fabric-react/lib/Panel”的面板。

此面板在右上角生成一个小 [x] 按钮。很难看,有没有办法将其默认背景颜色更改为红色并修改其鼠标悬停值?

4

1 回答 1

0

您可以轻松更改Panel Componentbutton style的throughstyles属性:

styles={{
   closeButton: {
     backgroundColor: '#f00',
   },
}}

如果要更改hover styleof button,则必须使用selectors属性:

styles={{
   closeButton: {
     backgroundColor: '#f00',
     selectors: {
       ':hover': {
         backgroundColor: '#000'
       },
     },
   },
}}

面板组件:

<Panel
  styles={{
    closeButton: {
      backgroundColor: '#f00',
      selectors: {
        ':hover': {
          backgroundColor: '#000'
        },
      },
    },
  }}
/>

工作Codepen 示例

有用的链接:

于 2020-10-24T21:02:57.843 回答