How to integrate Material-UI CSS Framework into create-react-app (CRA) TypeScript

Veröffentlicht am: 25 November 2020
auf dem Kanal: React Tutorials & Tips For ReactJs, d3 Developers

Material-UI CSS Framework

A CSS framework (or CSS library) is based on the concept of bringing a more standardized practice to your web development. Using a CSS Framework you can speed up your web development effort vs using CSS (or other style sheets) as it allows us to use predefined web elements.

Yes, we could create our custom components and style them from scratch, but most times it isn't worth the effort, and besides writing the components we would need to test them on all browsers and all devices sizes, can you imagine?

Both Bootstrap and Material are good CSS frameworks in certain projects to get started right away, without spending hours creating your own common components.

To install I will be setting up Material-UI core as well as the application's icons bundle;
$ yarn add -D @material-ui/core @material-ui/icons

To get Material-UI work seamlessly with TS we also need to update some settings in our ‘tsconfig.json’ file, following the recommendation of setting up TS page on React to avoid errors;

Open tsconfig.json with text editor and update;
{
"compilerOptions": {
"target": "es5",
"lib": [
"es6", "dom",
"dom",
"dom.iterable",
"esnext"
],
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true,
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": [
"src"
]
}

Take the Digital Course & Get 40 Pages React Book
https://www.udemy.com/course/getting-...

Get Free React 17 Book Chapter
https://elielrom.com/ReactBook

View the article on Medium
/ setting-up-professional-react-project-with...

Learning React?
https://github.com/EliEladElrom/react...

Auf dieser Seite können Sie das Online-Video How to integrate Material-UI CSS Framework into create-react-app (CRA) TypeScript mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer React Tutorials & Tips For ReactJs, d3 Developers 25 November 2020 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 28 Mal angesehen und es wurde von 1 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!