如何在 fluentui (office ui fabric) 中创建“危险”按钮？

Question

如何在 Microsoft fluentui 库中创建“危险”（红色）按钮？ 就像在引导程序等其他 ui 框架中一样。

有<DefaultButton>和<PrimaryButton>但我没有找到类似<DangerButton>东西？

或者，您如何以这种方式指定样式，以便按钮使用主题指定的“危险”颜色？

Answer 1

流畅的 ui 中没有“危险”按钮类型，您必须自己设置样式。

请参阅此处的示例（您基本上也可以向按钮添加一个 className 并根据需要对其进行样式设置）。

Answer 2

您可以从以下DefaultButton 组件属性更改button style ：样式、样式、类名、主题。

DefaultButton 组件的属性style ：

<DefaultButton style={{ backgroundColor: '#f00' }} />

DefaultButton 组件的属性styles ：

<DefaultButton
  styles={{
    root: {
      backgroundColor: '#f00',
      color: '#fff',
    }        
  }}
/>

物业className DefaultButton组件的：

// CSS 
.btn-danger { background-color: #f00; }

// Component
<DefaultButton className="btn-danger" />

DefaultButton 组件的属性theme ：

import { createTheme, DefaultButton, ITheme } from 'office-ui-fabric-react'

...

const dangerButtonTheme: ITheme = createTheme({
  palette: {
    white: '#f00',
    neutralPrimary: '#fff',
  },
})

<DefaultButton theme={dangerButtonTheme} />

Codepen工作示例

有用的链接：

• 组件样式
• 基本按钮样式定义
• 主题设计师