如何在fluentui办公室ui架构中创建“危险”按钮？

问题描述

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

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

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

解决方法

流畅的ui中没有“危险”按钮类型，您将不得不自行设置样式。

请参见here示例（基本上，您也可以只在按钮上添加className并设置其样式即可）。

,

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

默认按钮组件的

属性style ：

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

默认按钮组件的

属性styles ：

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

默认按钮组件的

属性className ：

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

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

默认按钮组件的

属性theme ：

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

...

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

<DefaultButton theme={dangerButtonTheme} />

Codepen working example

有用的链接：

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