ReactHustle

How to set inline styles in react (Typescript)

Jasser Mark Arioste

Jasser Mark Arioste

How to set inline styles in react (Typescript)

In this tutorial we'll learn about the different ways to set inline styles in react and how to extend inline styles in typescript if the css property currently does not exist.

Setting inline style directly on a component/element. #

In pure html we can set inline styles by assigning a string to the style attribute for example:

<p style="padding:2px">Start editing to see some magic happen :)</p>
1

In React/tsx, it's a little bit different. The tsx syntax uses the style attribute but is a React.CSSProperties type. For example if we add a style attribute to the element we can see the intellisense if we use vscode or some editor:

CSS Properties for styles.

This allows us to get all the type safety when adding styles to our elements which is extremely important for maintainability.

The code above would now look like this in react.
<div style={{padding: 2}}>This is div element</div>
12

Extracting the inline style to an object. #

In terms of clean code and maintainability, The code above would be all right if you only have a couple of styles but once you have a lot of styles in an element, it becomes hard to maintain. so we can extract the object and assign it in a variable.

The code above would now look like this in react.
const style = {
  padding:13,
  xxx: 13
};

<div style={style}>This is div element</div>
1234567

Notice that I added xxx property to the style and typescript does not complain or throw any error. In order to add type safety and intellisense to the style object we have to declare it as a CSSProperties type.

import React from "react";
The code above would now look like this in react.
const style:React.CSSProperties = {
  padding:13,
  xxx: 13
};

<div style={style}>This is div element</div>
12345678

Now we get a warning from typescript

Declare style with React.CSSProperties

As well as intellisense and good documentation:

How to augment or extend React.CSSProperties #

Sometimes we use styles that are not defined in the default React.CSSProperties and this will throw a compile time error in typescript. One example is when you use daisyUI styles for radial progress component. In daisyUI, if you want to create a radial progress component you have to indicate the --value in the styles object. For example

<div className="radial-progress" style={{"--value":70}}>70%</div>
1

Typescript throws a compile time error:

Type '{ "--value": number; }' is not assignable to type 'Properties<string | number, string & {}>'.
  Object literal may only specify known properties, and '"--value"' does not exist in type 'Properties<string | number, string & {}>
1

To fix this we can use module augmentation or declaration merging to add more properties to the React.CSSProperties typescript definition. First create a global.d.ts in the root folder of your project and add the following code


import React from "react";

declare module "react" {
  // augment CSSProperties here
  interface CSSProperties {
    "--value"?: string | number;
    "--size"?: string | number;
    "--thickness"?: string | number;
  }
}
1234567891011

After adding that, the error should be gone in our element:

DaisyUI radial progress doesn't have error in typescript

Conclusion #

In this tutorial we learned how to add inline styles in react with typescript and also extend the inline style definition using module augmentation or declaration merging.

If you like tutorials like this, subscribe to our newsletter below for more articles like this directly to your inbox.

References #

Credits: Image by K L from Pixabay

Share this post!

Related Posts

Disclaimer

This content may contain links to products, software and services. Please assume all such links are affiliate links which may result in my earning commissions and fees.
As an Amazon Associate, I earn from qualifying purchases. This means that whenever you buy a product on Amazon from a link on our site, we receive a small percentage of its price at no extra cost to you. This helps us continue to provide valuable content and reviews to you. Thank you for your support!
Donate to ReactHustle