unleash.unleash/website/docs/contributing/ADRs/front-end/preferred-styling-method.md

title
ADR: preferred styling method

This document supersedes ADR: preferred styles import placement

Background

In the codebase, we need to have a uniform way of performing style updates.

Decision

We have decided to move away from using makeStyles as it's currently deprecated from @material/ui, and kept alive with an external interop package to maintain compatability with the latest version. The preferred path forward is to use styled components which is supported natively in @material/ui and sparingly use the sx prop available on all mui components.

Consequences: code sharing

With makeStyles it was common to reuse CSS fragments via library utilities. In the styled components approach we use themeable functions and object literals

import { Theme } from '@mui/material';

export const focusable = (theme: Theme) => ({
    color: theme.palette.primary.main,
});

export const flexRow = {
    display: 'flex',
    alignItems: 'center',
};

Usage:

const StyledLink = styled(Link)(({ theme }) => ({
    ...focusable(theme),
}));

<IconButton sx={focusable}/>