Made styles unique to web part

samples/react-securitygrid/gulpfile.js

@@ -3,5 +3,8 @@
 const gulp = require('gulp');
 const build = require('@microsoft/sp-build-web');
 build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
-
+build.addSuppression(`Warning - [sass] The local CSS class 'ms-DetailsHeader' is not camelCase and will not be type-safe.`);
+build.addSuppression(`Warning - [sass] The local CSS class 'ms-DetailsHeader-cell' is not camelCase and will not be type-safe.`);
+build.addSuppression(`Warning - [sass] The local CSS class 'ms-List-cell' is not camelCase and will not be type-safe.`);
+build.addSuppression(`Warning - [sass] The local CSS class 'ms-DetailsRow' is not camelCase and will not be type-safe.`);
 build.initialize(gulp);

samples/react-securitygrid/package-lock.json

@@ -5525,11 +5525,13 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5542,15 +5544,18 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5653,7 +5658,8 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5663,6 +5669,7 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5675,17 +5682,20 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -5702,6 +5712,7 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5774,7 +5785,8 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5784,6 +5796,7 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5889,6 +5902,7 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -9647,9 +9661,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.10",
+      "version": "4.17.15",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg=="
+      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
     },
     "lodash._baseassign": {
       "version": "3.2.0",

samples/react-securitygrid/src/webparts/spSecurity/components/SpSecurity.module.scss

@@ -1,9 +1,42 @@
-.spSecurity {
+@import "~office-ui-fabric-react/dist/sass/References.scss";
 
+.spSecurity {
 }
-.themecolor{
+.themecolor {
-  color: "[theme:themePrimary, default:#ff0000]"
+  color: $ms-color-themePrimary;
 }
-.nonbrandeddocumentcolor{
+.nonbrandeddocumentcolor {
-  color: "#00FF00"
+  color: "#00FF00";
+}
+
+//*Set the Header are to 140px so it can hold the rotated headers
+.SPFXSecurityGrid {
+  :global(.ms-DetailsHeader) {
+    //* when adjusting line hieight also need to adjust second parameter to transform:translate below
+    height: 140px;
+    white-space: nowrap;
+  }
+
+  :global(.ms-DetailsHeader-cell) {
+    vertical-align: bottom;
+
+    span {
+      overflow: visible;
+    }
+  }
+
+  :global(.ms-DetailsHeader-cellTitle) {
+    margin-top:-8px;
+  }
+
+  //*Set the wrappers around the headers to display at 45degree angles
+  .rotatedColumnHeader {
+    transform: translate(25px, 40px) /*/Change second parameter when adjusting line height*/ rotate(315deg);
+    padding-bottom: 90px;
+    width: 40px !important;
+  }
+
+  :global(.ms-List-cell):nth-child(even) :global(.ms-DetailsRow) {
+    background: $ms-color-neutralLight;
+  }
 }

samples/react-securitygrid/src/webparts/spSecurity/components/SpSecurity.scss

@@ -1,24 +0,0 @@
-@import 'node_modules/office-ui-fabric-react/dist/sass/Fabric.scss';
-//*Set the Header are to 140px so it can hold the rotated headers
-.SPFXSecurityGrid .ms-DetailsHeader { //* when adjusting line hieight also need to adjust second parameter to transform:translate below
-    height: 140px;
-    white-space: nowrap;
-}
-//*Set the wrappers around the headers to display at 45degree angles
-.ms-DetailsHeader-cell.rotatedColumnHeader{
-    transform:  translate(25px,40px ) //*Change second parameter when adjusting line height
-    rotate(315deg);
-    padding-bottom: 90px;
-    width: 36px !important;
-   
-    
-}
-.ms-DetailsHeader-cell{
-    vertical-align: bottom;  
-}
-.ms-DetailsHeader-cell span  {
-    overflow: visible;
- }
- .ms-List-cell:nth-child(even) .ms-DetailsRow {
-    background: #EEE;
-  }

samples/react-securitygrid/src/webparts/spSecurity/components/SpSecurity.tsx

@@ -21,7 +21,7 @@ import {
   EnvironmentType
 } from '@microsoft/sp-core-library';
 /* tslint:disable */
-require('./spSecurity.css'); // loads the SpSecurity,css with unmodified names
+
 export default class SpSecurity extends React.Component<ISpSecurityProps, ISpSecurityState> {
   private svc: SPSecurityService = new SPSecurityService("ss");
   private userSelection = new Selection();
@@ -313,8 +313,7 @@ export default class SpSecurity extends React.Component<ISpSecurityProps, ISpSec
             minWidth: 20,
             maxWidth: 20,
             onRender: this.renderUserItem,
-            headerClassName: "rotatedColumnHeader",
+            headerClassName: styles.rotatedColumnHeader,
-
           });
       }
     }
@@ -528,8 +527,7 @@ export default class SpSecurity extends React.Component<ISpSecurityProps, ISpSec
           items={displayItems}
           columns={displayColumns}
           selectionMode={SelectionMode.none}
-          className="SPFXSecurityGrid"
+          className={styles.SPFXSecurityGrid}
-
         />
         <Panel
           isBlocking={false}