React Styling Guidelines

The following guidelines apply to only to the redesigned frontend service under the /react-app directory.

These instructions are meant to standardize how developers deal with component styling. By following these guidelines, developers make it easier for others to update components and maintain a consistent look within the app.

Component Library

MUI was selected as the main component library for this project. It offers a series of pre-designed, modern components that streamline UI development.

Global Styling

Styles can be applied across the entire application by using MUI Themes. In PIMS, the theme file is located at /react-app/src/themes/appTheme.ts. This theme describes specific stylings that will affect every component in the application. It also contains overrides for the styling of MUI components.

If there are styling changes that will be used in multiple locations, they should be addressed within this theme file.

This theme is injected using the ThemeProvider component, as seen in App.tsx.

Localized Styling

Some styling is specific to the component it modifies. In this case, it is preferable to include style properties within that component.

For single instances, inline styling may be appropriate. For example:

<img width={'300px'} src={'myImageSource'} />

If a particular style is used across multiple elements, it may be preferable to store styles in variables. For example:

const imgStyle: CSSProperties = {
  width: '300px',
};

// Then later
<img style={imgStyle} src={'myImageSource1'} />
<img style={imgStyle} src={'myImageSource2'} />

How to Style

This application tries to avoid the use of CSS files when styling frontend components.

Instead it is preferable to rely on style properties within React. See how to properly assign types to style objects in the Style Typing section.

Elements that are native HTML can be styled using the style property.

<span style={{ fontSize: '12pt' }}>
  Hello, World.
</span>

MUI components sometimes have properties that correspond to specific style options.

<Box height={'300px'}>
  In the box.
</Box>

Otherwise, MUI offers a property called sx, which accepts style objects.

<Box sx={{
  height={'300px'}
}}>
  In the box.
</Box>

Style Typing

Although not necessary, it can be helpful to apply types to any declared style objects. This will provide intellisense help from your IDE when typing the properties of the style object. Two common style types are:

• CSSProperites (from React)
• SxProps (from MUI)

SxProps may offer additional properties specific to MUI components.

Choose one and import them like so:

import { CSSProperties } from 'react';
import { SxProps } from '@mui/material';

const myReactStyle: CSSProperties = {
  backgroundColor: 'white',
};

const myMuiStyle: SxProps = {
  backgroundColor: 'black',
};