Unable to style the Label Color of a Office UI Fabric React Drop Down Control

Question

I am creating an SPFx 1.11 web part where I have imported Dropdown, IDropdownProps, IDropdownOption from office-ui-fabric-react as:

  import {   
  Dropdown,
  IDropdownProps,
  IDropdownOption  
} from 'office-ui-fabric-react';

However I need to Style the Label of the DropDown for which I need to import IDropdownStyles as well. However when I try to import IDropDownStyles, I get the below error:

office-ui-fabric-react/lib/Dropdown"' has no exported member 'IDropdownStyles

Please find the attached code screenshot. The dependencies from package.json are listed below :

"dependencies": {
    "@fluentui/react": "^8.8.0",
    "@microsoft/sp-core-library": "~1.4.1",
    "@microsoft/sp-lodash-subset": "~1.4.1",
    "@microsoft/sp-office-ui-fabric-core": "^1.11.0",
    "@microsoft/sp-webpart-base": "~1.4.1",
    "@types/react": "15.6.6",
    "@types/react-dom": "15.5.6",
    "@types/webpack-env": ">=1.12.1 <1.14.0",
    "react": "15.6.2",
    "react-dom": "15.6.2"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "~1.4.1",
    "@microsoft/sp-module-interfaces": "~1.4.1",
    "@microsoft/sp-webpart-workbench": "~1.4.1",
    "gulp": "~3.9.1",
    "@types/chai": ">=3.4.34 <3.6.0",
    "@types/mocha": ">=2.2.33 <2.6.0",
    "ajv": "~5.2.2"
  }

Can anyone guide me on what I may be doing wrong here?

Answer 1

It does not seem you have office-ui-fabric-react in package.json. You can try installing it:

npm install office-ui-fabric-react --save

For comparison, this is what I have in the package.json file:

  "dependencies": {
    "@microsoft/sp-core-library": "1.11.0",
    "@microsoft/sp-lodash-subset": "1.11.0",
    "@microsoft/sp-office-ui-fabric-core": "1.11.0",
    "@microsoft/sp-property-pane": "1.11.0",
    "@microsoft/sp-webpart-base": "1.11.0",
    "office-ui-fabric-react": "^6.189.2",
    "react": "16.8.5",
    "react-dom": "16.8.5"
  },
  "devDependencies": {
    "@microsoft/rush-stack-compiler-3.3": "0.3.5",
    "@microsoft/sp-build-web": "1.11.0",
    "@microsoft/sp-module-interfaces": "1.11.0",
    "@microsoft/sp-tslint-rules": "1.11.0",
    "@microsoft/sp-webpart-workbench": "1.11.0",
    "@types/chai": "3.4.34",
    "@types/es6-promise": "0.0.33",
    "@types/mocha": "2.2.38",
    "@types/react": "^16.9.17",
    "@types/react-beautiful-dnd": "^13.0.0",
    "@types/react-dom": "16.8.3",
    "@types/webpack-env": "1.13.1",
    "ajv": "~5.2.2",
    "gulp": "~3.9.1",
    "gulp-sequence": "1.0.0",
    "gulp-stylelint": "^13.0.0",
    "lodash": "^4.17.15",
    "spfx-uifabric-themes": "^0.8.0",
    "stylelint": "^13.6.1",
    "stylelint-config-css-modules": "^2.2.0",
    "stylelint-config-standard": "^20.0.0",
    "stylelint-scss": "^3.18.0",
    "webpack-bundle-analyzer": "^3.8.0"
  }