如何自定义 Office UI Fabric React Dialog CSS？

Question

我想在我的对话框组件中添加一些样式属性（例如为文本框添加边距），但我的类在渲染中没有被引用

HelloWorld.tsx

import styles from './HelloWorld.module.scss';

<Dialog
hidden={false}
dialogContentProps={{
  type: DialogType.normal,
  title: "My Dialog",
  className: styles.dialogadd,
}}
modalProps={{
  isBlocking: false,
  className: styles.dialogadd,
}}>

<div className={styles.permcheck}>
  <Checkbox label="Test 1" />
  <Checkbox label="Test 2" />
  <Checkbox label="Test 3" />
</div>

HelloWorld.module.scss

.dialogadd {
    font-size: 20px;
  }

  .permcheck {
    margin-top: 5px;
  }

虽然我的类在我渲染的 HTML 中，但没有调用，我不知道为什么....

使用的版本：

• 节点：8.11.3
• SPFX：1.9.1
• Office UI Fabric React：6.189.2
• 反应：16.8.5
• 打字稿：2.9

感谢您的帮助！

Answer 1

Here 是一个看起来可以工作的代码笔。

    <Dialog
      firstFocusableSelector="searchbox"
      hidden={hideDialog}
      onDismiss={this._closeDialog}
      dialogContentProps={{
        type: DialogType.normal,
        title: 'My Dialog',
        className: 'dialogadd'
      }}
      modalProps={{
        isBlocking: false
      }}
    >
      <div className='permcheck'>
        <Checkbox label="Test 1" />
        <Checkbox label="Test 2" />
        <Checkbox label="Test 3" />
      </div>
    </Dialog>

...我用的 scss 是这样的：

.dialogadd {
  font-size: 20px;

  .permcheck {
    margin-top: 100px;
  }
}