Skip to content

How to style a component or page

Jump to bottom
Eugenia Chen edited this page Nov 11, 2020 · 2 revisions

Contents

CSS classes

Add one CSS class

A CSS class is an attribute that can be applied to multiple HTML elements. It applies unique formatting to those elements.

For example, say I want to create a CSS class called yellow-text that changes the text-color to yellow. Let's say my component looks like this:

export default function Text() {
  return (
    <h1>This is a huge heading</h1>
    <p>Here is a paragraph of text about how awesome WECE is. It's the best RSO on campus for sure!</p>
    <p>Here is another paragraph of text about the ECEB.</p>
  );
}

Use className attribute

Right now, there are no CSS classes being applied. Normally, to apply a class, we would add the attribute class="" where the classname goes inside the quotes. However, in React, we use the className attribute instead. And since we have our styles imported, we have to apply them differently.

Our styles import looks something like this:

import styles from "../styles/Text.module.css";

Now, for example, to add the yellow-text class, we would need to do something like this:

export default function Text() {
  return (
    <h1 className={styles["yellow-text"]}>This is a huge heading</h1>
    <p>Here is a paragraph of text about how awesome WECE is. It's the best RSO on campus for sure!</p>
    <p>Here is another paragraph of text about the ECEB.</p>
  );
}

What this is doing is taking the styles import, looking for the "yellow-text" class, and applying it to the <h1></h1> element. How this works is that the {} brackets are injecting javascript code into the attribute. This allows us to use styles as a variable for an object, look up "yellow-text", and return the string for the CSS class that is from our styles file.

You can apply the "yellow-text" class to multiple elements by adding it as an attribute to any opening tag. For example:

export default function Text() {
  return (
    <h1 className={styles["yellow-text"]}>This is a huge heading</h1>
    <p className={styles["yellow-text"]}>Here is a paragraph of text about how awesome WECE is. It's the best RSO on campus for sure!</p>
    <p className={styles["yellow-text"]}>Here is another paragraph of text about the ECEB.</p>
  );
}

Add multiple CSS classes

If you want one HTML element to have multiple CSS classes, you have use a little bit of different syntax.

There are two ways to do it:

  1. Add together different classes

    • You can add another class by separating it with a space. We can do that by adding the strings together. For example, if I wanted to add classes "yellow-text" and "header-text", then I could do the following:
className={styles["yellow-text"] + " " + styles["header-text"]}
  1. Use the ` backtick symbol.
    • Another way to add the classes is to use template literals. These are strings that allow embedded expressions. To embed a piece of Javascript code, we use ${}.
    • To add the classes "yellow-text" and "header-text", then I could do the following:
className={`${styles["yellow-text"]} ${styles["header-text"]`}

Write CSS

In your .module.css file, you can specify different styles. To apply a style to an element, use a class. For example, if we have a "yellow-text" class, we write the styles for it in CSS as below:

.yellow-text {
}

The .yellow-text is a selector that specifies which class we want to style. We know it is a CSS class because it starts with a ..

The CSS properties will go inside the {} brackets.

For example, to change the text color to yellow, I would apply the following style:

.yellow-text {
  text-color: yellow;
}

Here, text-color is a CSS property name. The value is yellow.

CSS resources

This is a great reference for CSS properties: https://www.w3schools.com/cssref/default.asp.

If you want to look at elements that have been styled already, look at codepen.io for inspiration. For example, if you are creating a menu, you can search for menu examples. Please don't copy the designs you see here, but instead use them as a reference for your own designs.

View your styles

components: Storybook

If you are writing a component, you can use Storybook to see what it looks like. Follow the [How to create a new story] guide. When you make changes to your component, the Storybook will also update. Just refresh the page to see your changes.

pages: run the local client

If you are writing a page, our application can be run locally in the browser. To run it, run:

npm run dev

Then, go to your page by adding /your-page-name to the browser. For example, if you want to view the about page, go to http://localhost:3000/about. When you make changes to the page, you can refresh the browser to see the updates.

Clone this wiki locally