Load raw CSS in TypeStyle
TypeStyle tries to be an all in one CSS in JS management solution so you can always fall back to raw CSS if you ever need to migrate old code quickly. This lesson will demonstrate how to use the cssRaw function along with the real world use case of CSS resets e.g. normalize.css.
[00:00] Here, we have a simple div with the text "hello world" that is being styled using TypeStyle. TypeStyle allows you to use raw and encapsulated CSS using the cssRaw function that is exported from the main module.
[00:13] The cssRaw function simply takes a string containing any raw CSS you want TypeStyle to manage. For example, here, we have some raw CSS that adds a CSS class name called red that sets the color to red. Note that raw CSS is pure CSS, and by its very nature, global.
[00:33] In our example, the class name red is a global CSS class. We can use this CSS class anywhere in our application. For example, let's apply it to the root div that we are rendering by simply concatenating red to the class name.
[00:49] Now, when we run the application, you can see that the div turns red. You can call cssRaw multiple times, and the new CSS is simply appended to the buffer of the CSS that is being managed by TypeStyle.
[01:01] For example, we will go ahead and add a class for bold that bumps up the font red to be bold. We can use this class just like we use the red class. Now, when we run the application, you can see that the font red changed to bold.
[01:16] cssRaw is great for quickly migrating existing CSS, writing proof of concepts, and even bringing in a global CSS reset. For example, normalized CSS. I can jump to the CDN, copy all the raw CSS, jump back to my project, call cssRaw, paste in the copied CSS, and we are done.
[01:42] Rewriting such global CSS in a CSS in JS format would be a waste of time, and using cssRaw for this is perfectly fine.