Skip to main content

Inline Styles

React, a popular JavaScript library for building user interfaces, allows you to style your components in various ways. One such way is using inline styles. This approach involves writing CSS styles directly within your React components. In this tutorial, we'll explore how to utilize inline styles in your React applications.

The Basics of Inline Styles in React​

In traditional HTML, you might have come across inline styles. They're written directly into the HTML element as an attribute, like so:

<div style="color: blue; font-size: 14px;">Hello, world!</div>

React takes a slightly different approach to inline styles. Instead of a string, they're written as a JavaScript object, where the properties are written in camelCase, and values are written as strings. This is what the same styling would look like in a React component:

<div style={{ color: "blue", fontSize: "14px" }}>Hello, world!</div>

In this case, style is a prop that takes an object. Notice the double curly braces - the outer braces signify a dynamic JavaScript expression, while the inner ones create an object.

Properties and Values in React Inline Styles​

As you might have noticed, properties in React inline styles are written in camelCase. This is a departure from the kebab-case usually used in CSS (like font-size). This is because JavaScript doesn't allow hyphens in object keys unless they're quoted.

The values in the style object are written as strings. This means that if a value is numeric, like 14px, you must write it as a string, like "14px".

However, there's an exception to this rule. If the value is just a number without a unit, you can write it as a number. For example:

<div style={{ fontSize: 14 }}>Hello, world!</div>

In this case, React will interpret the 14 as pixels.

Declaring Styles Outside the JSX​

For better readability and reusability, you can declare your styles outside of your JSX, then reference them within your components. Here's an example:

const divStyle = {
  color: 'blue',
  fontSize: '14px'
};

function HelloWorld() {
  return <div style={divStyle}>Hello, world!</div>;
}

In this case, we're creating a divStyle object with our styles, then passing it to the style prop in our div.

Pros and Cons of Inline Styles​

There are a few advantages to using inline styles in React:

  • They're local to the component, which means you won't accidentally override styles elsewhere in your application.
  • They can be generated dynamically based on the component's state or props.
  • You don't need to worry about specificity, as inline styles always have the highest specificity.

However, there are also some drawbacks:

  • Inline styles can't use some CSS features, like pseudo-classes or media queries.
  • They can make your components harder to read if you're not careful.
  • If you're used to writing regular CSS, the camelCase syntax and string values might take some getting used to.

Despite these drawbacks, inline styles can be a useful tool in your React styling toolbox.

Conclusion​

In this tutorial, you learned how to use inline styles in React. You learned that they're written as JavaScript objects with camelCase properties and string values. You also learned that you can declare your styles outside of your JSX for better readability and reusability. Lastly, you learned about the pros and cons of using inline styles in React.

Remember, React offers a variety of ways to style your components, and the best approach depends on your specific needs and preferences. Inline styles are just one option among many. Happy coding!