🎨Styles

Global, reset, and override stylesheet are three techniques used to control the styling and layout of web pages.

Overview

In this boilerplate we recommended for learn about this library.

• MUI Style

• Emotion (Additional)

• JSS (Additional)

• SASS (Additional)

In this boilerplate there are 3 style areas namely global, reset and override. An example of use is below:

Global Style

Global style functions to place all global CSS code usage throughout the application. You can put the code CSS in src/styles/global.scss

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

Reset Style

Reset style is a technique used to normalize the default styles of HTML elements across different web browsers, which can vary in their default styling. You can put the code CSS in src/styles/reset.scss

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Override Style

Override style is used to combine several CSS framework in boilerplate, we recommend using it with MUI. You can follow guide integration MUI theme or need more info check https://mui.com/material-ui/customization/how-to-customize/#5-global-theme-variation. You can put the code CSS in src/styles/mui