Theming in Material-UI
- ThemeProvider Usage:
- Material UI provides a
ThemeProvider
component for injecting a theme into the application.
- Material UI provides a
- Create Theme Object:
- Begin by defining a theme object using
createMuiTheme()
.
- Begin by defining a theme object using
- ThemeProvider Integration:
- Pass the created theme object to the
ThemeProvider
component. This component wraps the entire template that needs to be themed.
- Pass the created theme object to the
- Context Feature Utilization:
<ThemeProvider>
utilizes React’s context feature to propagate the theme to all components within the template.
- Default Styling:
- Components inherit default styling properties from the theme. For example, an app bar’s background color defaults to the primary color specified in the theme.
- Customization Possibilities:
- Override or modify component colors and styles as needed. This can be achieved by explicitly setting values for individual components or by introducing another nested
<ThemeProvider>
with a different theme around the specific section requiring customization.
- Override or modify component colors and styles as needed. This can be achieved by explicitly setting values for individual components or by introducing another nested
Defining a theme object:
The responsiveFontSizes() function enables us to have viewport responsive text sizes.
import { createMuiTheme, responsiveFontSizes }
from '@materialui/core/styles';
const theme = responsiveFontSizes(createMuiTheme({
}));
Spacing: It helps create consistent spacing between the elements of our UI.
spacing: 4,
Typography:
Typography is where we define different font variants that are then used in the component templates via the ‘Typography’ component.
typography: {
fontFamily: [ 'Roboto',
'Raleway',
'Open Sans',
].join(','),
h1: {
fontSize: '5rem',
fontFamily: 'Raleway',
}
,
h2: {
fontSize: '3.5rem',
fontFamily: 'Open Sans',
fontStyle: 'bold',
}
,
h3: {
fontSize: '2.5rem',
fontFamily: 'Roboto',
}
,
}
Palette:
Palette is where we define the colors to be used in our React app. The theme exposes the following predefined palette colors – primary, secondary, error, warning, info, success, and text for typography colors.
palette: {
background: {
default: '#009900',
},
primary: {
main: '#2B37D4',
},
secondary: {
main: '#E769A6',
},
error: {
main: '#D72A2A',
},
warning: {
main: '#FC7B09',
},
info: {
main: '#6B7D6A',
},
success: {
main: '#09FE00',
},
text: {
primary: '#000000',
secondary: '#FFFFFF',
},
}
Example: Below is the code example of the adding the theme to react app.
Javascript
import React, { Component } from "react" ; import "./App.css" ; import CssBaseline from "@material-ui/core/CssBaseline" ; import { ThemeProvider } from "@material-ui/styles" ; import theme from "./theme" ; import Container from "@material-ui/core/Container" ; import Typography from "@material-ui/core/Typography" ; import Button from "@material-ui/core/Button" ; function App() { return ( <React.Fragment> <ThemeProvider theme={theme}> <CssBaseline /> <Container maxWidth= "sm" > <Typography component= "h1" variant= "h1" align= "center" color= "textPrimary" gutterBottom > Geeks for Geeks </Typography> <Typography variant= "h2" align= "center" color= "textSecondary" > h2 Typography with secondary text colour </Typography> <br /> <Typography variant= "h3" align= "center" color= "textPrimary" paragraph > h3 Typography variant with primary text colour </Typography> <br /> <Button variant= "contained" color= "primary" > { " " } Primary </Button> <Button variant= "contained" color= "secondary" > { " " } Secondary </Button> { /* Since, color prop only takes primary and secondary as values,we define other colors in component's style */ } <Button variant= "contained" style={{ background: theme.palette.error.main }} > Error{ " " } </Button> <Button variant= "contained" style={{ background: theme.palette.warning.main }} > Warning{ " " } </Button> <Button variant= "contained" style={{ background: theme.palette.info.main }} > Info{ " " } </Button> <Button variant= "contained" style={{ background: theme.palette.success.main }} > Success{ " " } </Button> <br /> <br /> </Container> </ThemeProvider> </React.Fragment> ); } export default App; |
Javascript
//theme.js import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles' ; const theme = responsiveFontSizes(createMuiTheme({ spacing: 4, typography: { fontFamily: [ 'Roboto' , 'Raleway' , 'Open Sans' , ].join( ',' ), h1: { fontSize: '5rem' , fontFamily: 'Raleway' , }, h2: { fontSize: '3.5rem' , fontFamily: 'Open Sans' , fontStyle: 'bold' , }, h3: { fontSize: '2.5rem' , fontFamily: 'Roboto' , }, }, palette: { background: { default : '#009900' //green }, primary: { main: '#2B37D4' , //indigo }, secondary: { main: '#E769A6' , //pink }, error: { main: '#D72A2A' , //red }, warning: { main: '#FC7B09' , //orange }, info: { main: '#6B7D6A' , //gray }, success: { main: '#09FE00' , //green }, text: { primary: '#000000' , //black secondary: '#FFFFFF' , //white }, }, })); export default theme; |
Step to Run Application: Run the application using the following command from the root directory of the project.
npm start
Output:
How to add theme to your React App?
Themes play a crucial role in web applications, ensuring a cohesive visual identity. They serve to regulate and define various aspects such as color schemes, backgrounds, font properties, shadow levels, opacity, and more, thereby maintaining a consistent and harmonized aesthetic throughout the application.