Home » React CSS

React CSS

CSS in React is used to style the React App or Component. The style attribute is the most used attribute for styling in React applications, which adds dynamically-computed styles at render time. It accepts a JavaScript object in camelCased properties rather than a CSS string. There are many ways available to add styling to your React App or Component with CSS. Here, we are going to discuss mainly four ways to style React Components, which are given below:

  1. Inline Styling
  2. CSS Stylesheet
  3. CSS Module
  4. Styled Components

1. Inline Styling

The inline styles are specified with a JavaScript object in camelCase version of the style name. Its value is the style?s value, which we usually take in a string.

Example

App.js

Note: You can see in the above example, we have used two curly braces in:
<h1 style={{color: “Green”}}>Hello tutoraspire!</h1>.
It is because, in JSX, JavaScript expressions are written inside curly braces, and JavaScript objects also use curly braces, so the above styling is written inside two sets of curly braces {{}}.

Output

React CSS

camelCase Property Name

If the properties have two names, like background-color, it must be written in camel case syntax.

Example

App.js

Output

React CSS

Using JavaScript Object

The inline styling also allows us to create an object with styling information and refer it in the style attribute.

Example

App.js

Output

React CSS

2. CSS Stylesheet

You can write styling in a separate file for your React application, and save the file with a .css extension. Now, you can import this file in your application.

Example

App.js

App.css

Index.html

Output

React CSS

3. CSS Module

CSS Module is another way of adding styles to your application. It is a CSS file where all class names and animation names are scoped locally by default. It is available only for the component which imports it, means any styling you add can never be applied to other components without your permission, and you never need to worry about name conflicts. You can create CSS Module with the .module.css extension like a myStyles.module.css name.

Example

App.js

myStyles.module.css

Output

React CSS

4. Styled Components

Styled-components is a library for React. It uses enhance CSS for styling React component systems in your application, which is written with a mixture of JavaScript and CSS.

The styled-components provides:

  • Automatic critical CSS
  • No class name bugs
  • Easier deletion of CSS
  • Simple dynamic styling
  • Painless maintenance

Installation

The styled-components library takes a single command to install in your React application. which is:

Example

Here, we create a variable by selecting a particular HTML element such as <div>, <Title>, and <paragraph> where we store our style attributes. Now we can use the name of our variable as a wrapper <Div></Div> kind of React component.

App.js

Output

Now, execute the App.js file, we will get the output as shown below.

React CSS

When we move the mouse pointer over the image, its color will be changed, as shown in the below image.

React CSS


Next TopicReact Animation

You may also like