So in React/Next.js you have Inline-CSS, plain CSS (could use BEM and/or SASS here), CSS Modules, Styled Components (a form of CSS-in-JS), styled-jsx, (another form of CSS-in-JS).
CSS-in-JS is what Material-UI uses for its custom theme, from the docs: “You can choose any other styling solution, or even plain CSS to create the styles, but be sure to consider the CSS injection order, as the CSS injected into the DOM by Material-UI to style a component has the highest specificity possible, since the “<link>” is injected at the bottom of the “<head>” to ensure the components always render correctly.”
Supported by Next out of the box it is a type of CSS-in-JS. More specifically, “CSS-in-JS library that allows you to write encapsulated and scoped CSS to style your components.”
syntax looks like this:
<div classname={styles.grid}>
<style jsx>{`
label: {
display: block;
margin-bottom: .2rem;
}
button: {
background-color: blueviolet;
padding: .4rem .8rem;
}
`}
</style>
</div>