COMP6080

Web Front-End Programming

ReactJS

CSS Frameworks

 

Various Methods

1. Importing stylesheets directly (covered): Old school!
2. Using a component library like MaterialUI (today): Contains a huge array of primitive components so that you don't have to reinvent the wheel
3. Using styled-components (extra): A custom middle ground to fine tune components while still making them reusable

 

Using a framework like "Material UI"

Material-UI allows us to:

1. Leverage a library of pre-defined components that conform to a standard aesthetic (like Bootstrap)
2. Further stylize those components based on clearly defined rules
3. Use styled-components to compose components

 

Using "Styled Components"

Styled components allow us to:

1. Define an HTML element + a series of CSS styles => A ReactJS
2. Compose other Styled Components on top of previous defined components
3. Dynamically defined CSS properties as part of these definitions

 

We will now demonstrate.