How to use Inline Styles in React ?

ReactJS is a JavaScript library that is used to build a user interface. React makes it easy to create an interactive user interface by using a component-based approach. It offers various ways to apply styles to components. One of the methods is using inline styles, where styles are defined directly within the components as JavaScript objects.

We are going to learn about the following approaches to use inline styles in React:

Style Object

In this approach, Style is defined in a JavaScript object and directly applied within the JSX. You can also directly write the object inside style attribute.

Syntax:

import React from 'react';

const MyComponent = () => {
    const styles = {
       color: 'green',
       fontSize: '16px',
       border: '1px solid black',
   };

  return (
      <div style={styles}>
           This component has inline styles.
     </div>
  );
};

export default MyComponent;

Template Literals with JavaScript Expressions

In this approach, Template literals allows dynamic styles based on JavaScript expressions. This approach is particularly useful when styles need to be calculated or based on certain conditions.

Syntax:

import React from 'react';

const MyComponent = () => {
     const fontSize = 16;

    return (
       <div style={{
            color: 'green',
            fontSize: `${fontSize}px`,
             border: '1px solid black',
       }}>
           This component has dynamic inline styles.
      </div>
  );
};

export default MyComponent;

Styled Components

In this approach, ReactJS supports various libraries like Styled Components. These libraries enable the creation of styled components with a more structured and modular approach. To use styled-components library, you have to install it using the following command.

npm install styled-components 

Syntax:

// Using Styled Components
import styled from 'styled-components';

const StyledDiv = styled.div`
     color: green;
    font-size: 18px;
     border: 1px solid black;
`;

const MyComponent = () => {
    return (
         <StyledDiv>
               This component is styled using Styled Components.
         </StyledDiv>
   );
};

export default MyComponent;

Steps to Create React Application

Step 1: Create a React application using the following command:

npx create-react-app gfg

Step 2: After creating your project folder(i.e. gfg), move to it by using the following command:

cd gfg

Example: This below example demonstrate Inline Styles in ReactJS App.js

//File path: src/App.js
import React from 'react';

const App = () => {
    const styles = {
        color: 'green',
        borderBottom: '2px solid black',
        marginLeft:'20px'
    };

  let fontSize = '15px';
  let leftMargin = '20px';

  return (
    <>
       <h1 style={styles}>
        GeeksforGeeks
       </h1>

        <p style={{ fontSize: `${fontSize}`,
                marginLeft: `${leftMargin}` }}>
            This is a example of Template Literals with 
            JavaScript Expressions (Dynamic Styles)
       </p>
    </>
  );
};

export default App;

To run the application use the following command:

npm run start 

Output: Now go to http://localhost:3000 in your browser.

jaimin78

Follow

Improve

Article Tags :

• Web Technologies
• ReactJS
• React-Questions