In this episode of Frontity Talks we demonstrate the correct way to use external CSS in your Frontity project using the <Global> component. We also explain the pros and cons of doing so.
We use antd, a library of high quality React components that you can use for building rich, interactive user interfaces and that has it’s own stylesheet for styling those components in order to illustrate importing and using external CSS.
Frontity Talks is a series of videos in which our Developer Relations team explain a variety of topics related to Frontity. We hope that you find this episode of Frontity Talks useful for you. If you’ve missed any of the earlier episodes of Frontity Talks and want to catch up, you can find them all in this Youtube playlist .
Don’t forget to subscribe to our channel and tap the notification bell to get notified when new videos are out!
antd doesn’t have a CSS-In-JS version (as far as we know) so the styles of these components should be loaded with Global styles (as explained in the Frontity Talk). For the rest of the components you can use CSS In JS.
Thank you, @mburridge for the article and the tutorial video! I am currently setting up a Frontity-based project for our company. This project is not a marketing purpose site, but it is SaaS-model product that linked to WP CMS and database. I really appreciate Frontity team to bring this framework to the community that utilize NodeJS server to render page separately.
Our team use a 3rd-party service of pre-designed React components similar to AntD, and it’s pretty much 80% of this project’s design interface is from external provider which is React components and CSS style in node_modules, such as Date picker, Kanban card, transaction tables, etc.
My question is how bad in term of performance for styling is imported from external CSS library since we have no control of the CSS from the 3rd-party provider. 80% of react components from external, and 20% from our team. It means we only use 20% of CSS-in-JS, and that is optimized by Frontity.
Welcome to the Frontity community. For optimal performance it’s best to use CSS-in-JS in your Frontity project. By adding a CSS file using the <Global> component the file will be loaded for each page on the site. Whether that’s detrimental to the performance of your site is for you to determine by benchmarking your site with that configuration.
If the library is static, i.e. it’s not going to be updated, then you could incorporate the CSS from the library into your project using CSS-in-JS.
I guess I will need to incorporate the external css of each components into each JS file for every small modules on our project. Looking at the docs, I see this company, Syncfusion also use several CSS libraries like Google’s Material, Microsoft Office’s Fabric, Bootstrap for their base-line styled components.
to get notified when new videos are out!