Add Styling to a React app inside an Nx workspace

Instructor: [0:00] We've previously added our Material-UI components to our React Bot Store game app. If you go into the browser, you can see that we get some material cards rendered, and also the animations that work properly, but you can definitely see that some styling is missing here.

[0:16] In terms of styling, you have different possibilities inside Nx. We have chosen, for this application, when we generated it to use Sass as our framework. You have basically in that source folder a style.css file, which contains application-wide styles. You would place them here and they would automatically get compiled for you and embedded into your application.

[0:35] You can also rename this final order files, reference them directly from within here, or you can configure them inside your workspace JSON. If you open that workspace JSON file, there's a project note, which has then application specific note. Further down here in that builder, built target, you'll see here the styles note. This one is basically an array of files that should be automatically compiled and embedded into your application.

[1:02] You can rename it here, you can add different ones or even embed external sites from your node folder. Moreover, every application component that got generated has according SCSS files at the same level of the sc-component.

[1:16] This SCSS file gets imported directly into the component here, and so it would also be loaded and properly treated by webpack. In our case, for instance, let's just change these styles here and paste in some more sophisticated, some more nice looking styles.

[1:31] Again, the web server that is running in the background will automatically compile them. If we go to our application, we can now see that they are properly laid out and all of their effects still work as we expect.

[1:42] Note that how you style applications, or how you modify the styles really depends on what you have chosen when you generated the application, because during the generation part you actually defined which styling framework you'd like to use inside your workspace.

[1:56] For instance, if you do yarn Nx general novel React app and just let's use the help parameter. You can see here we can specify styling option. In our case, we have chosen SCSS as our styling framework, but we can have a variety of different values here.

[2:13] The best is to go to Nx.dev, which is the main website for Nx. If you go to plugins, then React schematics, which are the generators and then application specific. Then if you'll scroll down here we see the various options, which we can pass and one of those options is the actual styling which we want to use.

[2:35] The possible values which we can provide is CSS, just as normal, or ICSS as we used. We can use here style components. We can use styled-jsx and a variety of other things.

[2:45] Also note that the first time you choose the value, this will be the same for the entire workspace. The values being memorized in the workspace JSON if you score at the very bottom there, you have basically a note for schematics which remembers the defaults that have been chosen.

[3:01] For instance, for application time the schematic style will always SCSS. The lintel will be ESLint and it will use Babel. Similarly, for the components, all four libraries. Of course, whenever you generate a new application, you can always pass that style and pass in a different value. That specific application would use a different kind of styling mechanism.