Styling a React Component

A guide for adding style customizations to your custom React components.

Your custom React component can be styled using CSS. This is accomplished by adding a CSS module to your component's directory and importing it in the .tsx file.

To explore styling your custom React components, we will add some basic CSS to an example component.

CSS file

To add styling to our component, let's create a CSS file called CatFactToast.module.css and place it in the /components/CatFactToast/ directory in our local Aurora SDK repository. CSS Modules will be used to import the file into the React component.

Warning

All component module files must be placed in the same directory as the component file, which is a directory beneath the components directory named with the component template's ID.

Here is some basic CSS we'll add to the CatFactToast.module.css file:

Importing styles to the React component

Now that the CSS file has been created, we'll need to add it to our Component. This is done using an import statement at the top of the component file. Here is an example:

The import styles from './CatFactToast.module.css'; line indicates that you want to use styling from the CatFactToast.module.css file located in the component's root directory.

Mapping CSS classes

In order to prevent CSS classes used in your custom component from conflicting with existing CSS classes used elsewhere in your Community, it's important to map your class names. Here is how we achieved this in our example component:

First, we declare the variable cx to utilize the useClassNameMapper function.

Next, whenever we use the class name in our component, we use the cx function to indicate which class we want to use and that it should be mapped to prevent possible conflicts.