— material ui, theming, material design, frontend, coding project — 1 min read
I chose the Material UI theme for my app, since it's one of the popular libraries out there, and its components are ready to use out of the box.
1// import react, etc.23import {4 ThemeProvider,5 createTheme,6} from '@material-ui/core/styles'78import customTheme from '~/theme/theme'9import App from './App'1011const theme = createTheme(customTheme)1213const render = () => {14 ReactDOM.render((15 <ThemeProvider theme={theme}>16 <App />17 </ThemeProvider>18 ), document.getElementById('app'))19}2021// render only after the reloading is done22render()1<head>2 <link rel="preconnect" href="https://fonts.googleapis.com">3 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>4 <link href="https://fonts.googleapis.com/css2?family=Nunito&family=Poppins&display=swap" rel="stylesheet">5</head>1const fontFamilies = {2 fontNunito: "'Nunito', Roboto, Helvetica, sans-serif",3 fontPoppins: "'Poppins', Roboto, Helvetica, Arial, sans-serif",4}56const typography = {7 fontFamily: fontFamilies.fontNunito,8 h1: { fontFamily: fontFamilies.fontNunito },9}P/s: will add more as the project evolves! :)