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
TypeScript：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;
  }
}

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

1 个答案: