office-ui-fabric - 如何在fluentui（office ui fabric）中创建一个“危险”按钮？

Question

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

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

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

Answer 1

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

DefaultButton 组件style的属性：

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

DefaultButton 组件styles的属性：

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

DefaultButton 组件className的属性：

// 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工作示例

有用的链接：

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

Answer 2

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

请参阅此处的示例（您也可以基本上只将 className 添加到按钮并根据需要设置样式）。