2

How to add external libraries like material-ui to our Spfx Webpart?

I know to add external libraries having their CDN link and types definition like jquery but don't know how to add libraries which have their type definition but do not have CDN link like material-ui.

Please tell if anybody had worked on such libraries.

2 Answers 2

1

I think you could enable CDN for your Office 365 tenant so you could upload your JS library to SharePoint online and load from it.

Below sample list steps to enable CDN for Office 365 tenant.

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/hosting-webpart-from-office-365-cdn

Or, another approach like below sample.

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/connect-to-sharepoint-using-jsom

Update:

Sample test with material ui(I'm not familiar with material ui currently, but it's based on React DOM, so I use React as my SPFx framework and insatall material ui by npm, seems working, when bundle the assets, the script will be 'translate' to javascript).

enter image description here enter image description here enter image description here

2
  • I think you have not understood the question just follow this link to add external libraries [link]( ericoverfield.com/… ) here in config.json in externals we add cdn of jquery , my question is what if we don't have any cdn link like that of material-ui library Dec 26, 2017 at 15:59
  • You may check my update
    – Lee
    Dec 28, 2017 at 8:18
0

To install: npm install material-ui

To install types: npm i @types/material-ui

To use: Lee_MSFT is doing it correctly and there IS NO CDN referenced for types as you can see he's using in his example the package from NPM.

IF YOU purely want the types then Google 'npm' + library name + 'types', library name is the only dynamic thing here so your search will look like so: npm material-ui types

So in short use CDN links: https://jquery.css etc

OR

use packages e.g.: npm install jquery @jquery-types

Using both at the same time for same library can make you confused.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.