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

Question

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

此面板在右上角生成一个 [x] 小按钮。很难看，有什么办法可以把它的默认背景颜色改成红色&修改它的鼠标悬停值吗？

Answer 1

您可以轻松更改 button style 到 styles 属性的 面板组件:

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

如果你想改变button的hover style，你必须使用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 面板上的退出按钮样式

Change the exit button style on Fluent UI's Panel

office-ui-fabric-react

fluentui-react