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

问题描述

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

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

解决方法

您可以轻松地更改面板组件的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