Frontity uses CSS-in-JS for styling. In particular it uses the Emotion library. This is baked into Frontity and requires no configuration on the developer’s part.

Sometimes, however, there’s a need to import external CSS into your Frontity project – perhaps because a React component that you’re using has some custom CSS. Another reason you might want to import external CSS is if you want to use a CSS library such as Bootstrap or Tailwind.

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 the antd component library to illustrate this. antd is a collection of high quality React components that you can use for building rich, interactive user interfaces. It includes its own stylesheet which we import and use in a <Global> component so that the styles get applied site-wide and will be available wherever we choose to use an antd component.

Check out the video to learn how to use external CSS in your WordPress site using JavaScript, React and Frontity.

You can find the code in this repo: Frontity + AntD demo.

Time poor? Jump straight to the part of the video that interests you:

00:42 Introducing the topic
01:22 Frontity uses CSS-In-JS
04:54 With “Global” we can load a CSS file
05:39 Frontity + antd demo
10:24 We can use “Global” for loading CSS Reset
13:45 Fixing the emotion issue when loading external CSS

We hope you enjoy this episode of Frontity Talks and that you find it useful. If you want to see any particular Frontity related topic covered then please suggest it in the video comments or use the hashtag #AskFrontity on Twitter.

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!

Comments? Suggestions? Join the conversation here.