Skip to main content

ADR: preferred styling method

This document supersedes ADR: preferred styles import placement


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


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',


const StyledLink = styled(Link)(({ theme }) => ({

<IconButton sx={focusable}/>