Question

我正在使用React中'office-ui-fabric-react / lib / Panel'中的Panel。

此面板在右上角生成一个[x]小按钮。很难看到，是否可以将其默认背景颜色更改为红色并修改其鼠标悬停值？

Answer 1

您可以轻松地更改面板组件的button style至styles属性：

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

如果要更改hover style中的button，则必须使用selectors属性：

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

面板组件：

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

工作Codepen example

有用的链接：

Panel Component styles的定义
这是最重要的Component Styling

在Fluent UI的面板上更改退出按钮样式

1 个答案: