FAQ | This is a LIVE service | Changelog

Skip to content

Refactor components to a simpler styling method

Joe Adams requested to merge 44-simplify-styling-approach into master

All components no longer 'appear' as a Material-UI component (removed custom Ucam classes and material typescript module augmentation). This removes a lot boilerplate involved in creating new components, and also removes the ability for consumers of our design system to deeply customise all aspects of the component. We've decided that we don't want this level of customisation as our design system should provide constraints that enforce our design language.

All styling for our components now uses the experimentalStyled api provided by material, which is actually a light abstraction over Emotion. The theme file should now only be used to override styles of Material-UI components, and not our own custom ones.

I've included a small contributing doc that gives an example of which styling approach to choose.

Acceptance:

  • All components should function exactly as before
  • Components should no longer be able to be styled from the theme styleOverrides pattern
  • Contributing doc should make sense

Closes #44 (closed) #45 (closed)

Edited by Joe Adams

Merge request reports