4.3 Styling pages

Inline styles CSS Modules CSS-in-JS Libraries Fonts

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

Next.js also supports CSS-in-JS libraries including styled-components, emotion, and CSS Modules with PostCSS.

These libraries allow us to write CSS directly in the JavaScript files using tagged template literals or functional components.

Tagged template literals: a template string that allows us to define CSS styles directly into JavaScript code

We can define styles inline with the components

For example, using the styled-components library:

The backticks define the tagged template literal, indicating that it contains CSS rules. Inside the template literal, we can write regular CSS styles The resulting styled component is assigned to the variable Heading, which can then be used // as a React component.

Fonts

Create a public Folder:

Create a folder named public in the root directory. This folder serves static assets in Next.js.

Add the Custom Font Files:

Place the custom font files (e.g., custom-font.woff and custom-font.woff2) inside the public folder.

Create a CSS File for Font Import:

Create a new CSS file (e.g., fonts.css) in the public folder to define the @font-face rule for importing the custom font.

Import the CSS File in _app.js:

In the _app.js file located in the pages folder (or create one if it doesn't exist), import the fonts.css file to make the custom font available throughout your Next.js app.

export default MyApp;

The font is now ready to use in CSS

Use it in CSS to apply to specific elements:

Bonus styling tips:

The clsx library lets us make situation-dependent class names. It can be installed using either npm install clsx or yarn add clsx.

Next.js allows us to import Sass via .scss and .sass extensions which provides bonus features to traditional CSS (e.g, defining global variables, nesting of CSS selectors, etc).

Previous Section

Next Section

2️⃣

4.2 Creating, editing, and navigating pages

4️⃣

4.4 Route Handlers and Data Fetching

⚖️

Copyright © 2021 Code 4 Tomorrow. All rights reserved. The code in this course is licensed under the MIT License. If you would like to use content from any of our courses, you must obtain our explicit written permission and provide credit. Please contact classes@code4tomorrow.org for inquiries.