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

【问题标题】：Change the exit button style on Fluent UI's Panel更改 Fluent UI 面板上的退出按钮样式
【发布时间】：2020-10-25 06:01:15
【问题描述】：

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

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

【问题讨论】：

标签： office-ui-fabric-react fluentui-react

【解决方案1】：

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

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

【讨论】：