如何在 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工作示例

有用的鏈接：

• 組件樣式
• 基本按鈕樣式定義
• 主題設計師