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.
If you want to add dynamic styles, you can toggle classes: