Mastering Inline Styles in React: A Quick Guide with Examples

In React, you can apply inline styles to components using the style attribute, which takes an object of key-value pairs. The key is the camelCase version of the CSS property, and the value is the corresponding style value. Unlike traditional HTML, where styles are written as strings, React uses an object to define styles.

Syntax

<element style={{ propertyName: 'value', anotherProperty: 'value' }} />

Each CSS property in the object should be written in camelCase (e.g., backgroundColor, fontSize), and the values are typically strings (for most CSS properties) or numbers (for values that are in px).

 

Properties that require pixel values (e.g., width, height, fontSize) can be written as numbers, and React assumes pixels (e.g., fontSize: 20 equals 20px).

 

Example

export default function BoxComponent() {
  let paraStyles = {
    fontSize: 30,
    fontweight: "bold",
  };

  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "lightcoral",
        border: "1px solid black",
        margin: 20,
        textAlign: "center",
        width: 250,
        height: 250,
      }}
    >
      <p style={paraStyles}>Hello World.....</p>
    </div>
  );
}

In this example,

1.   The BoxComponent demonstrates how to apply inline styles to a React component. The outer div uses inline styles to create a box with a defined width and height of 250 pixels, a light coral background color, and centered content using the flex display property. justifyContent: "center" and alignItems: "center" align the text horizontally and vertically within the box.

2.   The paragraph (<p>) inside the div also has its own inline styles defined in the paraStyles object, which sets the font size to 30 pixels and makes the text bold. This example showcases how inline styles can be used in React to customize both layout and typography directly within the component.

 

Follow below step-by-step procedure to build a complete working Application.

 

Step 1: Go to the post (Quickly Set Up a React Project with Vite: A Step-by-Step), and set up a React Project ‘inline-styles’

 

Project structure looks like below.

 

Step 2: Create components folder in src/ folder and define a BoxComponent.jsx file.

 

BoxComponent.jsx

export default function BoxComponent() {
  let paraStyles = {
    fontSize: 30,
    fontweight: "bold",
  };

  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "lightcoral",
        border: "1px solid black",
        margin: 20,
        textAlign: "center",
        width: 250,
        height: 250,
      }}
    >
      <p style={paraStyles}>Hello World.....</p>
    </div>
  );
}

 

Step 3: Update main.jsx file like below.

main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import BoxComponent from './components/BoxComponent'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BoxComponent />
  </StrictMode>,
)

 

Step 4: Build and run the application by executing below commands.

cd inline-styles
npm install
npm run dev

 

Open the url ‘http://localhost:5173/’ in browser, you can see below screen.

 

 

You can download this application from this link.

Previous                                                    Next                                                    Home