How to import custom css files using Chakra UI for React?

Question

This is a very specific question, but I am using the Chakra UI component library for React and I want to import my own custom css files, although it doesn't allow me to do this.

I don't know if this is a bug or if it is intended, but is there any way I can go around it?

Thanks.

Answer 1

You can extend or override a token in the default theme by importing the extendTheme function. You can override properties as well as add new ones. But if you want to add an external CSS file, I've found out from reading the docs that in order to import other file types (.css, .woff or .svg) in your theme file, you'll need to move those imports out of the theme file.

Answer 2

Make sure that you import css files in right place. Try to import your css files into App.js or if be more specific into the file where you init ChakraProvider. This approach works fine for my project:

import { ChakraProvider } from '@chakra-ui/react';
import './yourCssFile.css';