Styling Components

AthenaJS includes styled-component integration. Read more about styled-components in their documentation.

Why Styled Components?

The core team chose styled-components to handle styled components because styles are scoped to a specific component. This makes it easier to maintain your code, as each component's styles are contained within that component. Styled-components also generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.

We thought about letting users upload CSS files, but this would also inject a lot of unnecessary code into the codebase.

Styled-components is also easy to use! You write actual CSS code to define the styles of your component, no need to learn new syntax. It's easy to get started styling your components with styled-components.