Top 5 amazing way to use inline style in React js

Hey there, developers! Welcome to this guide. Inline CSS can be super handy in certain situations, especially when you need to make quick design tweaks without dealing with separate files. But did you know that you can use external CSS files as well as inline styles in a React project? Don't worry, I'll walk you through it in this article.

I'll reveal the top 5 amazing techniques for using inline CSS in your React.js projects.

The way of the inline style:

Using Inline Styles with the style Attribute:
Using Inline Styles with object variable:
Applying Inline Styles Conditionally Based on State or Props:
Extending Inline Styles with Pseudo-selectors and Media Queries using the Radium tool:
Utilizing CSS Modules for Scoped Styling:

1. Using Inline Styles with the style Attribute:

When using inline CSS in HTML, we typically apply styles directly within the style attribute of an element, like this: <h1 style="color: red">Hello, World!</h1>. However, in React JSX, there are a few differences:

Inline styles in JSX are written as JavaScript objects within double curly braces ({{ }}).

CSS property names are written in camelCase instead of kebab-case.

Property values are provided as strings.

Here's how it looks in React JSX:

import React from 'react';

function App() {
    return (
        <div style={{ height: '100vh', display: 'grid', placeItems: 'center', }}>
            <h1 style={{ color: 'red' }}>Hello, World!</h1>
        </div>
    );
}

export default App;

In this code, we're using double curly braces ({{ }}) to denote an inline CSS object within JSX. This allows us to embed CSS directly into our JSX code.

CSS property is written in camelCase, which is the JavaScript convention. For example, placeItems instead of place-items.

Property values are provided as strings. For instance, '100vh' for the height property and 'grid' for the display property.

2. Using Inline Styles with object variable:

import React from 'react';

function App() {
    const styleDiv = {
        height: '100vh',
        display: 'grid',
        placeItems: 'center'
    }

    const styleHeading = {
        color: 'steelblue'
    }

    return (
        <div style={styleDiv}>
            <h1 style={styleHeading}>Hello, World!</h1>
        </div>
    );
}

export default App;

In this code, we've defined two JavaScript objects, styleDiv, and styleHeading, containing CSS properties and values.

The styleDiv configures properties for <div> element, including height, display, and placeItems. And the styleHeading sets the color property to red for a heading.

3. Applying Inline Styles Conditionally Based:

import React from 'react';

function App({ isSpecial }) {
    return (
        <div>
            <h1 style={{
                color: isSpecial ? 'red' : 'green',
                fontSize: isSpecial ? '24px' : '20px',
                fontWeight: isSpecial ? 'normal' : 'bold'
            }}>Hello, World!</h1>
        </div>
    );
}

export default App;

In JSX, we can define inline CSS directly using double curly braces {{ }}. Within these braces, we set CSS properties and values directly. This allows us to conditionally style elements based on props, as demonstrated in the example.

4. Extending Inline Styles with Pseudo-selectors and Media Queries using the Radium tool:

In React, you can nest styles within a styles object and apply them using pseudo-classes like :hover. However, it's important to note that inline styles in React don't directly support pseudo-selectors like :hover.

To achieve inline :hover functionality, you'll need to install a library like Radium. You can install the Radium tool by using the following command:

npm i radium

// If installation fails, try this command 👇
npm install--save radium--force

Radium extends React's inline styling capabilities, allowing for pseudo-class and media query usage directly within inline styles.

import React from 'react';
import Radium from 'radium';

const styles = {
    parentEl: {
        height: '100vh',
        display: "grid",
        placeItems: "center",
    },
    childEl: {
        color: "red",
        transition: 'color 0.3s', // Adding transition for smooth color change
        ':hover': { // Applying hover effect
            color: 'green',
        }
    }
}

function App() {
    return (
        <div style={styles.parentEl}>
            <h1 style={styles.childEl}>Hello, World!</h1>
        </div>
    );
};

export default Radium(App);

Importing Radium: We've imported Radium to utilize its inline styling features.

Defining Styles: Two JavaScript objects, styles.parentEl and styles.childEl, encapsulate CSS properties.

Applying Styles: Using the style attribute in JSX, we apply these styles to respective elements.

Radium Wrapper: The App component is wrapped with the Radium higher-order component, enabling the usage of Radium's capabilities for handling inline styles and pseudo-class selectors like :hover.

You can also write code for the media queue using Radium, but you can use it only when you have to work on a small project where not much code is required.

5. Utilizing CSS Modules for Scoped Styling:

// styles.module.css file
.myClass {
    color: red;
    font - size: 20px;
}

// App.js file
import React from 'react';
import styles from './styles.module.css';

function App() {
    return (
        <div className={styles.myClass}>
            Hello, World!
        </div>
    );
}

export default App;

Defining Inline Styles: The CSS styles are defined in a separate file named styles.module.css. Inside, we define the .myClass class with properties like color set to red and font-size to 20 pixels.

Importing Styles: In the App.js file, we import the CSS module using import styles from './styles.module.css';. This allows us to access the CSS class names via the styles object.

Applying Styles: Within the App function, we apply the styles to the JSX element using the className attribute. By specifying className={styles.myClass}, we associate the styles defined in .myClass with the <div> element.

This way you can write inline CSS within your React component. In this way, we can write CSS styles separately from the component logic.

Conclusion

To become a developer like a senior, you need to know such tricks. We've told you everything from this article to adjusting styles based on state or props with the style attribute and even extending inline styles with pseudo selectors using tools like Radium. Start practicing now to enhance your skills.

For bigger projects, it's best to use a separate CSS file rather than just inline styles. But still, if you prefer using inline styles, even for bigger projects, then you can use Tailwind CSS, which is easy to use even for large-scale projects.

If you have any questions regarding this article or any other web development, you can ask them in the question box given below, and you will get an answer as soon as possible.

Next: Top 10 Powerful React Libraries Every Developer Sh...