office-ui-fabric-react - 更改 Fluent UI 面板上的退出按钮样式

Question

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

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

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

Answer 1

您可以轻松更改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 示例

有用的链接：

• 面板组件样式的定义
• 而这个是最重要的组件样式