Styling, CSS-in-JS, and Joy UI
This template makes heavy use of Joy UI components. It was built on the same components as MUI's Material UI, but with more barebones styling that is easier to customize and doesn't look as much like Google.
It is recomended to stick with Joy UI components wherever possible, that means using
Box over div, Button over button, etc.Joy UI's
Link component is set up in a way that it always uses Next.js' Link component under the hood, providing you with advanced routing and prefetching capabilities.Styling & theming
Modify the file in
src/theme.tsx to customize Joy UI components. You can edit color themes, default props, and CSS variables.In general, when customizing a component, use the following order of preference:
- Props like
color,variant,size, etc. You can add custom color palettes and variants insrc/theme.tsx. - CSS variables like
--Button-radiusor--Button-gap. - Inline styles using the
sxprop. These give you full flexibility on the component's CSS style. Joy UI uses Emotion to compile these into a compact stylesheet, so you don't have to worry about performance. However, doing this on a per-component basis can lead to inconsistencies, and compatibility problems with other components.
Why no Tailwind?
See here
- If you're scared of long variable names, you should probably use a different template.
- If you don't want to learn CSS variables but already sunk cost into learning Tailwind (which is just as complicated at this point, and for the most part maps one CSS property into one type of Tailwind classes anyways), you should probably use a different template.
- If you don't like code reusability and prefer just rewriting your components every single time, you should probably not use a template at all.
- If you like to be constrained and don't want to be able to use advanced CSS features, you should probably stick to Squarespace.
Template enhancements
If you've previously used Joy UI, this template also includes a few components that are built on-top of Joy UI components and should, in most cases, be used instead of the original Joy UI component. These are:
SmartLinkoverLinkfor smart external link detection, adding an indicator and opening a new tab automaticallyParagraphoverTypographyfor a paragraph component that includes margin defaults and links for titles. Typography is still useful in many cases where you don't want those defaultsAsyncButtonoverButtonfor a button that can be passed an async function in itsonClickprop and will automatically show a loading indicatorAsyncIconButtonoverIconButtonfor the same reason asAsyncButton