Inline styles

Inline styles are defined as JavaScript objects and applied to the style attribute.

For example:

CSS Modules

You can add practice problems here if you want. Follow the format below.

• CSS modules allow us to write styles in separate files to be imported into our components as well as global CSS to be loaded in every page.
• Styles in CSS modules are scoped to a specific component, allowing us to use the same class name in different files without collisions.

For component-level styles, we can start by creating a CSS file in a top-level directory with the '.module.css' extension to define our styles. For example, we can create a file ‘styles.module.css’ and define our styles there.

We then import the CSS file into our component and use the imported class names as classNames. For example, if we have defined styles ‘heading’ and ‘description’ in our styles.module.css file, we can use them as follows:

To create a style loaded into every page, we can create a new file in pages called ‘_app.js’ if it does not already exist. This will act as the root component for the app and allow us to override the default App component. We additionally create a global.css file for the global styles.

Next, we open the ‘_app.js’ file and import the App component from 'next/app' and the global.css file:

import { AppProps } from 'next/app';

import '../styles/global.css';

To apply the global styles, we must create a custom App component that extends the default App component and wraps it with the global styles:

Once the file is saved, the global.css file will be applied globally. Make sure the file path for the global CSS file is correct.

CSS-in-JS Libraries