Any new CSS styling on front should be done with CSS Modules instead of styled-jsx. Feel free to convert any existing components that use styled-jsx to CSS modules while you work on the codebase.

When writing a component, make a folder with the name of the component and the code inside of an index file. Add a .module.css file with the name of the component.

components/
└── new-component/
    ├── index.tsx
    └── new-component.module.css

Inside of your code, import the styles:

import styles from './new-component.module.css'

styles is now an object whose keys correspond to the class names defined in .module.css. Apply those classnames to your JSX:

const NewComponent = () => {
	return (
		<div className={styles.container}>
			{/* ... */}
		</div>
	)
}

This means that your styles must be static.

Dynamic Styling

If you want to add dynamic styles, you can toggle classes: