What's the TypeScript Type for the style Attribute in React?

The correct TypeScript type for the style attribute in React is: 

React.CSSProperties

To give you an example, let's consider the following React component: 

import React, { FunctionComponent, CSSProperties } from 'react';

type Props = { styleRules: CSSProperties; };

const Button: FunctionComponent<Props> = ({ styleRules, children }) => (
    <button style={{ ...styleRules }}>{children}<button>
);

export default Button;

If the React.CSSProperties type is not available, make sure you have @types/react package installed, for example, like so: 

npm install --save @types/react

This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.