Inline style of Office Fabric UI library in spfx webpart

After upgraded the @microsoft/sp-office-ui-fabric-core library, all inline styles gone, to get it back, you just need to do:

import '@microsoft/sp-office-ui-fabric-core/lib/office-ui-fabric-core-sass/FabricCore.css';

Here is the test case:

public render(): React.ReactElement&lt;IShortCutProps> {
	return (
		&lt;div className={styles.shortCut}>
			&lt;div className={styles.container}>
				&lt;div className={styles.row}>
					{this.menus}
				&lt;/div>
			&lt;/div>
			&lt;div className="ms-Grid" dir="ltr">
				&lt;div className="ms-Grid-row">
					&lt;div style={{ backgroundColor: 'red' }} className="ms-Grid-col ms-sm6 ms-md4 ms-lg2">A&lt;/div>
					&lt;div style={{ backgroundColor: 'yellow' }} className="ms-Grid-col ms-sm6 ms-md8 ms-lg10">B&lt;/div>
				&lt;/div>
			&lt;/div>
		&lt;/div>
	);
}

Post Views: 2,438

2019/04/30 by admin