Made withReactClip

ReactJS Tutorial - 20 - Styling and CSS Basics

C

Codevolution

Creator on the React channel

Watch on YouTube ↗

554K viewsDec 17, 201811:40 runtime

Learn the fundamentals of styling React components with this comprehensive guide covering three essential techniques. This tutorial explores how to use traditional CSS stylesheets, including how to conditionally apply classes based on props and combine multiple classes with…

Chapters

#react#clip#frontend

Styling Options in React

There are several ways to style React components, each with its own use case:

Regular CSS Stylesheets
Inline Styling
CSS Modules
CSS-in-JS Libraries (e.g., styled-components)

1. Regular CSS Stylesheets

This is the traditional approach to CSS. You create a .css file and import it directly into your component.

Importing: import './myStyles.css';
Applying classes: Use the className attribute instead of class.
- Example: <h1 className="primary">Styled Text</h1>

Conditionally Applying Classes

You can dynamically apply classes based on props or state, often using a ternary operator.

letclassName = props.primary ? 'primary' : '';
<h1 className={className}>Conditional Styling</h1>

Applying Multiple Classes

Template literals are a convenient way to combine a dynamic class with static ones.

// In component
<h1 className={`${className} font-xl`}>Big Orange Text</h1>

// In CSS
.font-xl {
  font-size: 72px;
}

Note
For more complex conditional class logic, consider using the classnames library, which can provide cleaner syntax.

2. Inline Styling

Inline styles in React are specified using a JavaScript object, not a string.

Key Rules:

Style properties must be camelCased (e.g., fontSize instead of font-size).
Style values are typically strings.

Example:

// 1. Create the style object
const heading = {
  fontSize: '72px',
  color: 'blue'
};

// 2. Apply it using the style attribute
<h1 style={heading}>Inline Styled Heading</h1>

3. CSS Modules

CSS Modules provide a way to write locally scoped CSS, preventing class name conflicts between components.

Important
To use CSS Modules with Create React App, your stylesheet file name must end with .module.css (e.g., appStyles.module.css).

Importing: You import the styles as an object.
- import styles from './appStyles.module.css';
Applying classes: You access class names as properties on the imported object.
- <h1 className={styles.success}>Success</h1>

Key Advantage: Local Scope

Classes defined in a regular stylesheet are global and can unintentionally affect child components. CSS Modules solve this by ensuring that class names are unique and scoped only to the component that imports them. This makes your CSS more predictable and maintainable.

4. CSS-in-JS Libraries

This is another popular approach where CSS is written directly within your JavaScript files.

Tip
If you are interested in exploring CSS-in-JS, styled-components is a highly recommended and widely used library.

Introduction to Styling in React

Alright guys, in this video we are going to learn the basics of styling and CSS when it comes to React. There are a couple of options to style React components.

The first one is regular CSS stylesheets. The second one is inline styling. Third, we have CSS modules. Fourth, we can use CSS in JS libraries which work really well with React.

In this video, we are only going to cover the first three approaches. Learning a CSS in JS library would be a separate series in itself, which I would like to cover sometime in the future. But if you're keen on using a library for your project, I would recommend styled components.

All right, let's start with the first approach: using regular CSS stylesheets.

Using Regular CSS Stylesheets

I'm going to go back to VS code and create a new file called Stylesheets.js. So within the components folder, Stylesheet.js. Within the file, I'm going to use the React snippet rfc to create a functional component. Within the return statement, I will simply add an H1 tag that says "stylesheets." I will also include this file in the App component, make sure to import the component at the top.

To specify the CSS for this component, I am going to create a new file called myStyles.css. Within the file, I am going to create a class primary and set the color property to orange.

Applying CSS Classes

Now to be able to use this class in our component, we will have to import it. So in the stylesheet component, import ./myStyles.css.

Now, on the H1 tag we can specify the class using the className attribute. className is equal to primary. If you save the file and take a look at the browser, the text should appear in orange.

Conditionally Applying Classes

And you can also conditionally apply a class based on props or state of the component. For example, let me pass down a prop called primary and set it to false. So on the Stylesheet component primary is equal to false. Now I can use the props in the component. Pass props as a parameter and within the body, let className = props.primary ? 'primary' : ''. And we are going to use this className variable as the value to our className attribute. If you now take a look at the browser, you should see the text appear in black. If I go back to App component, pass the prop primary as true, the text will be displayed in orange.

So basically what we are doing is reading the value of the primary prop, and if it is true, we are setting a value of primary, and if it is false, we set it to an empty string. And that className variable is assigned as a value to the className attribute.

Now if you want to specify multiple classes, the simplest option is to use template literals. So in the CSS file, I'm going to create a new class font-xl and I'm going to set the font size to 72 pixels. Now back in the component, we change the value of the className attribute to a template literal using backticks. So this is going to be backticks, and because className is a variable value, we include it within ${}. And then we can specify our second class font-xl. If you now take a look at the browser, you can see that the text is in orange and also the font size is larger. Both the classes have been applied.

As an alternative to template literals, there is also a library called classnames which you can make use of. It tends to be a bit more cleaner. But this is pretty much how you apply classes using regular stylesheets. And if necessary, you can also conditionally apply the class based on props or state of the component.

Inline Styling in React

Next up, we have inline styling and I'm going to create a new file called inline.js. So within the components folder, inline.js. Within the file, I'm going to use the React snippet rfc to create a functional component. Within the return statement, I will add a new heading that says "inline".

Now let's style this heading. In React, inline styles are not specified as a string. Instead, they are specified with an object whose key is the camel-cased version of the style name and the value is usually a string. For example, I can create a new object called heading. So const heading = { fontSize: '72px' }. The key is the CSS property name, but as you notice, it has to be camel-cased, and the value is specified as a string. If you want to specify additional CSS properties, simply add a comma and then list the property. Let's go with color set to blue. Now to apply this style inline, we make use of the style attribute on the H1 tag. style attribute is going to be equal to the object which is heading.

Now, let's include this component in App component, and if you take a look at the browser, you should see the text "inline" with the styling applied. So create an object and apply it to the style attribute. Inline styling is pretty straightforward.

Introduction to CSS Modules

Finally, let's talk about CSS modules. CSS modules feature is available with React Scripts version 2 or higher, so make sure you have updated your Create React App package if it is below major version 2. Now there is a file naming convention to be used for CSS modules with Create React App. The file name must be suffixed with .module.css. For example, let me create two stylesheets in the source folder. So within the source folder, if appStyles.css is a regular stylesheet, then appStyles.module.css is a CSS module stylesheet.

In the regular stylesheet, that is appstyles.css, I'm going to add a class error. This is going to be color: red. In the module stylesheet, I'm going to add a class success which has a color of green. Now in the App component, I'm going to import both the files. import './appStyles.css' and for the module file, import styles from './appStyles.module.css'. You can see that there is a difference in in how we import a module stylesheet.

Now to use the error class from the regular stylesheet I'm going to add an H1 tag that says "error" and set the className attribute to error. To use the class from the module stylesheet, I'm going to add another H1 tag, "success," and the class name is going to be styles.success. So we access the class using the import statement variable name. So error is our class name in the regular stylesheet and success is our class name from the module stylesheet. Let me quickly correct the spelling.

If you now save all the files and take a look at the browser, you should see both the classes being applied: error in red and success in green.

Local Scope and Preventing CSS Conflicts

Now one advantage of using CSS modules is that the classes are locally scoped by default. For example, if I copy the error heading into the inline component and uncomment the inline component, you can see that it still works. The heading "error" is in red. So the CSS kind of applies to every child component as well. In our code, it applies to app component and inline component, which is the child component. Now this might lead to CSS conflicts.

CSS modules on the other hand, because you reference the class names using the styles variable, it cannot be used in the children component. If I copy the success heading and paste it in the inline component, you can see that the application doesn't compile. It doesn't know what styles is. So you can't accidentally use a class that is defined for some other component.

So that is the CSS module approach.

Conclusion and Next Steps

We have covered the regular stylesheet approach, inline styling, and CSS modules. If you want to try out a CSS-in-JS package like styled-components, please do so by all means. But this is pretty much the basics of styling React components. Thank you guys for watching, don't forget to subscribe, and I'll see you guys in the next video.