Setting inline Styles in React.js

Setting inline Styles in React.js #

To set inline styles in React:

Set the style prop on the element to an object.
Set the specific CSS properties and values to style the element.
For example, <div style={{backgroundColor: 'salmon', color: 'white'}}>.

App.js

Copied!
const App = () => {
  const stylesObj = {
    backgroundColor: 'lime',
    color: 'white',
  };

  const elementWidth = 150;

  return (
    <div>
      {/* 👇️ set inline styles directly */}
      <div style={{backgroundColor: 'salmon', color: 'white'}}>
        Some content
      </div>

      <br />

      {/* 👇️ set inline styles using an object variable */}
      <div style={stylesObj}>Some content</div>

      <br />

      {/* 👇️ set inline styles conditionally using a ternary */}
      <div
        style={{
          backgroundColor: 'hi'.length === 2 ? 'violet' : 'mediumblue',
          color: 'hi'.length === 2 ? 'white' : 'mediumpurple',
        }}
      >
        Some content
      </div>

      <br />

      {/* 👇️ set inline styles interpolating a variable into a string */}
      <div
        style={{
          width: `${elementWidth}px`,
          backgroundColor: 'salmon',
          color: 'white',
        }}
      >
        Some content
      </div>
    </div>
  );
};

export default App;

react set inline styles

The code sample shows multiple ways to set inline styles on an element in React.js.

The first example sets the styles directly on the element.

App.js

Copied!
<div style={{backgroundColor: 'salmon', color: 'white'}}>
  Some content
</div>

Note that multi-word properties like background-color are camelCased when set on the style object.

The value of the style property is wrapped in 2 sets of curly braces.

The first set of curly braces in the inline style marks the beginning of an expression, and the second set of curly braces is the object containing styles and values.

The second example extracts the styles object into a variable.

App.js

Copied!
const App = () => {
  const stylesObj = {
    backgroundColor: 'lime',
    color: 'white',
  };

  return (
    <div>
      {/* 👇️ set inline styles using an object variable */}
      <div style={stylesObj}>Some content</div>
    </div>
  );
};

export default App;

You can use this approach when you have multiple elements that share the same styles.

You can also conditionally set inline styles in React using the ternary operator.

App.js

Copied!
<div
  style={{
    backgroundColor: 'hi'.length === 2 ? 'violet' : 'mediumblue',
    color: 'hi'.length === 2 ? 'white' : 'mediumpurple',
  }}
>
  Some content
</div>

The ternary operator is very similar to an if/else statement.

The part before the question mark gets evaluated and if it returns a truthy value, the operator returns the value before the colon, otherwise it returns the value after the colon.

The ternary operator in the example checks if the length of the string hi is equal to 2 and if it is, it returns the string violet for the backgroundColor property, otherwise it returns mediumblue.

You can also interpolate expressions or variables with a string when setting inline styles.

App.js

Copied!
const App = () => {
  const elementWidth = 150;

  return (
    <div>
      {/* 👇️ set inline styles interpolating a variable into a string */}
      <div
        style={{
          width: `${elementWidth}px`,
          backgroundColor: 'salmon',
          color: 'white',
        }}
      >
        Some content
      </div>
    </div>
  );
};

export default App;

We used a template literal to concatenate a string and a variable when setting styles.

The width property of the div element is set to 150px.

Note that the string is enclosed in backticks ``, not in single quotes.

The dollar sign and curly braces syntax allows us to use placeholders that get evaluated.

A commonly used pattern in React is to extract wrapper components with predefined styles that render their children prop.

App.js

Copied!
function BoldText({children}) {
  return <span style={{fontWeight: 'bold'}}>{children}</span>;
}

const App = () => {
  return (
    <div>
      <p>
        Hello <BoldText>World</BoldText>
      </p>
    </div>
  );
};

export default App;

extract component for common styles

This is a very simple example, but the BoldText component sets some styles on an element and renders its children prop.

This approach is commonly used to define wrapper components with styles that are commonly reused.

An alternative to writing inline styles in React is to write your styles in a file with a .css extension.

App.css

Copied!
.bg-salmon {
  background-color: salmon;
}

.text-white {
  color: white;
}

.font-lg {
  font-size: 2rem;
  padding: 10px 10px;
}

And here is how we would import and use the classes.

App.js

Copied!
// 👇️ import css file
import './App.css';

const App = () => {
  return (
    <div>
      <p className="bg-salmon text-white font-lg">hello world</p>
    </div>
  );
};

export default App;

style using a css file

When importing global CSS files in React, it's a best practice to import the CSS file into your index.js file.

The index.js file is the entry point of your React application, so it's always going to be ran.

On the other hand, if you import a CSS file into a component, the CSS styles might get removed once your component unmounts.

Setting inline Styles in React.js

Setting inline Styles in React.js #

Borislav Hadzhiev