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

Question

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

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

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

Answer 1

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

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} />

代码笔working example

有用的链接：

• Component Styling
• 基本按钮styles definition
• Theme Designer

Answer 2

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

参见here 的示例（您也可以基本上只为按钮添加一个类名并设置您喜欢的样式）。