how to customize Office UI Fabric React Dialog CSS?

1
votes

I want to add some style properties inside my Dialog Component (like put a margin for a textbox) but my classes are not referenced on the render

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

Although my classes are in my rendered HTML, there are not called and I don't know why....

Versions used:

  • Node : 8.11.3
  • SPFX : 1.9.1
  • Office UI Fabric React : 6.189.2
  • React : 16.8.5
  • TypeScript: 2.9

Thx for any help !

1
office-ui-fabricspfx

1 Answers

1
votes

Here is a codepen that looks like it's working.

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

...and the scss I used for it is this:

.dialogadd {
  font-size: 20px;

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