Pass CSS styles as props in React TypeScript

avatar

Borislav Hadzhiev

Last updated: Apr 21, 2022

banner

Photo from Unsplash

Pass CSS styles as props in React TypeScript #

Use the React.CSSProperties type to pass CSS styles as props in React TypeScript, e.g. style: React.CSSProperties;. The CSSProperties type is used to type the style object that consists of CSS property names and values.

App.tsx
import React from 'react'; type ButtonProps = { // 👇️ type as React.CSSProperties style: React.CSSProperties; children: React.ReactNode; }; function Button({style, children}: ButtonProps) { return <button style={style}>{children}</button>; } const App = () => { return ( <div> <Button style={{padding: '2rem', fontSize: '3rem', backgroundColor: 'lime'}} > Click </Button> <h2 style={{fontSize: '3rem'}}>Hello world</h2> </div> ); }; export default App;

We typed the style object as React.CSSProperties.

When passing styles to the Button component, you will get autocomplete for property names.

You can figure out what the expected type for a specific prop is by using your IDE.

style prop cssproperties

In most IDEs you will be able to hover over the prop and see its value.

I use VSCode, so I right clicked on the style prop and then clicked "Go to Definition".

The definition of the style prop shows that its type is either CSSProperties or undefined.

You might also need to extend an HTML element in a component's props.

App.tsx
// 👇️ extend button props interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { style: React.CSSProperties; children: React.ReactNode; } function Button({style, children}: ButtonProps) { return <button style={style}>{children}</button>; } const App = () => { return ( <div> <Button style={{padding: '2rem', fontSize: '3rem', backgroundColor: 'lime'}} > Click </Button> <h2 style={{fontSize: '3rem'}}>Hello world</h2> </div> ); }; export default App;

The example shows how to extend a button element in the props of our custom component.

We used the React.ButtonHTMLAttributes type to extend a button element in the component's props.

You can add your custom props in the interface and your component can be passed any of the element-specific props.

The Button component can be passed any button-specific props in the example.

If you need a more broad type, you can use the HTMLAttributes type instead.

Other commonly used types to extend from are InputHTMLAttributes, TextareaHTMLAttributes, LabelHTMLAttributes, SelectHTMLAttributes, AnchorHTMLAttributes, CanvasHTMLAttributes, FormHTMLAttributes, ImgHTMLAttributes, etc.

Notice that we passed the HTMLButtonElement type to the ButtonHTMLAttributes generic in the example.

You might be extending an element of a different type.

The types are consistently named as HTML***Element. Once you start typing HTML.., your IDE should be able to help you with autocomplete.

Some commonly used types are: HTMLInputElement, HTMLButtonElement, HTMLAnchorElement, HTMLImageElement, HTMLTextAreaElement, HTMLSelectElement, etc.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.