Loading lesson path

React•React Core

React CSS-in-JS

Concept visual

React CSS-in-JS

Graph traversalgraph

current

queued

Start from A

â® Previous Next â¯

What is CSS-in-JS?

Formula

CSS - in - JS is a styling technique where you can write CSS directly in your JavaScript code.

This approach allows you to:

Write CSS using JavaScript

Create component-scoped styles

Use dynamic styles based on props

Avoid CSS class name conflicts

Formula

In this tutorial, we'll use the popular styled - components library.

Getting Started

CSS-in-JS is not a part of the React core library, but can be installed using many React build tools, like Vite, Webpack, or Create React App.

Formula

To install styled - components, run the following command:
npm install styled - components

Now you can start writing CSS directly in your .jsx files:

Example

Insert styles directly in the .jsx files:

import styled from 'styled-components';

const MyHeader = styled.h1`
padding: 10px 20px;
background-color: #007bff;
color: white;
`;

function App() {
return (

Formula

< MyHeader > Welcome!</MyHeader >

</>

);
}

Formula

Without CSS - in - JS, you would have to either:

Write CSS in a separate .css file and import it into your React components

Use inline styles

Notice that:

We use the styled object to create components Styles are written inside template literals (backticks)

You can use regular CSS syntax

Props in Styled Components

Formula

Another powerful feature of CSS - in - JS is the ability to use props to make styles dynamic.

Let's create an example where we have two buttons, one primary and one secondary. We want to base their background color on the value of the btntype prop:

Example import styled from 'styled-components';

const Button = styled.button`
padding: 10px 20px;
border: none;
border-radius: 4px;
background-color: ${props => props.btntype === 'primary' ? '#007bff' : '#6c757d'};
color: white;
cursor: pointer;
`;

function App() {
return (

<div> <Button btntype="primary">Primary Button</Button> <br /> <br />

Formula

< Button > Secondary Button </Button >

</div>

);
}

Extending Styles

Another way of letting multiple elements have the same styles is to extend existing styled components. For example, we can create a

PrimaryButton and

SuccessButton that both have the same styles as the Button component, but they also have separate background colors:

Example import styled from 'styled-components';

const Button = styled.button`
padding: 10px 20px;
border: none;
border-radius: 4px;
color: white;
cursor: pointer;
`;

const PrimaryButton = styled(Button)`
background-color: #007bff;
`;

const SuccessButton = styled(Button)`
background-color: #28a745;
`;

function App() {
return (

<div>

Formula

< PrimaryButton > Primary </PrimaryButton >
< SuccessButton > Success </SuccessButton >

</div>

);
}

Component-Scoped Styles

Just like with

Formula

CSS Modules, styles created in CSS - in - JS are scoped to the component.

They are given unique names and can only be used in the component that imports them. If we view the source of the page in the example above, the buttons will have unique class names like bSOFjJ and pkxvl, and will be refering to the CSS with the same unique class names in the style section.

Global Styles

You can also create global styles, which will be given normal class name and will be available for all components:

Example import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
h1 {
color: white;
background-color: purple;
font-family: Arial, sans-serif;
}
.myparagraph {
font-family: courier, monospace;
color: blue;
}
`;

function App() {
return (

<> <GlobalStyle />

Formula

< h1 > Welcome!</h1 >

<p className="myparagraph">This paragraph is styled with global styles.</p>

</>

);
}

If we view the source of the result in the example above, the CSS will have normal names and will be available for all components. â® Previous Next â¯

React CSS Modules

React Router

Loading lesson path

Learn/React/React Core

React•React Core

React CSS-in-JS

Concept visual

React CSS-in-JS

Graph traversalgraph

current

queued

Start from A

â® Previous Next â¯

What is CSS-in-JS?

Formula

CSS - in - JS is a styling technique where you can write CSS directly in your JavaScript code.

This approach allows you to:

Write CSS using JavaScript

Create component-scoped styles

Use dynamic styles based on props

Avoid CSS class name conflicts

Formula

In this tutorial, we'll use the popular styled - components library.

Getting Started

CSS-in-JS is not a part of the React core library, but can be installed using many React build tools, like Vite, Webpack, or Create React App.

Formula

To install styled - components, run the following command:
npm install styled - components

Now you can start writing CSS directly in your .jsx files:

Example

Insert styles directly in the .jsx files:

import styled from 'styled-components';

const MyHeader = styled.h1`
padding: 10px 20px;
background-color: #007bff;
color: white;
`;

function App() {
return (

Formula

< MyHeader > Welcome!</MyHeader >

</>

);
}

Formula

Without CSS - in - JS, you would have to either:

Write CSS in a separate .css file and import it into your React components

Use inline styles

Notice that:

We use the styled object to create components Styles are written inside template literals (backticks)

You can use regular CSS syntax

Props in Styled Components

Formula

Another powerful feature of CSS - in - JS is the ability to use props to make styles dynamic.

Let's create an example where we have two buttons, one primary and one secondary. We want to base their background color on the value of the btntype prop:

Example import styled from 'styled-components';

const Button = styled.button`
padding: 10px 20px;
border: none;
border-radius: 4px;
background-color: ${props => props.btntype === 'primary' ? '#007bff' : '#6c757d'};
color: white;
cursor: pointer;
`;

function App() {
return (

<div> <Button btntype="primary">Primary Button</Button> <br /> <br />

Formula

< Button > Secondary Button </Button >

</div>

);
}

Extending Styles

Another way of letting multiple elements have the same styles is to extend existing styled components. For example, we can create a

PrimaryButton and

SuccessButton that both have the same styles as the Button component, but they also have separate background colors:

Example import styled from 'styled-components';

const Button = styled.button`
padding: 10px 20px;
border: none;
border-radius: 4px;
color: white;
cursor: pointer;
`;

const PrimaryButton = styled(Button)`
background-color: #007bff;
`;

const SuccessButton = styled(Button)`
background-color: #28a745;
`;

function App() {
return (

<div>

Formula

< PrimaryButton > Primary </PrimaryButton >
< SuccessButton > Success </SuccessButton >

</div>

);
}

Component-Scoped Styles

Just like with

Formula

CSS Modules, styles created in CSS - in - JS are scoped to the component.

Global Styles

You can also create global styles, which will be given normal class name and will be available for all components:

Example import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
h1 {
color: white;
background-color: purple;
font-family: Arial, sans-serif;
}
.myparagraph {
font-family: courier, monospace;
color: blue;
}
`;

function App() {
return (

<> <GlobalStyle />

Formula

< h1 > Welcome!</h1 >

<p className="myparagraph">This paragraph is styled with global styles.</p>

</>

);
}

If we view the source of the result in the example above, the CSS will have normal names and will be available for all components. â® Previous Next â¯

React CSS Modules

React Router