Property does not exist on type 'DetailedHTMLProps, HTMLDivElement>' with React 16

HTML supports data-* attribute type for custom attributes. You can read about it more here.

Definition and Usage The data-* attributes is used to store custom data private to the page or application.

The data-* attributes gives us the ability to embed custom data attributes on all HTML elements.

The stored (custom) data can then be used in the page's JavaScript to create a more engaging user experience (without any Ajax calls or server-side database queries).

The data-* attributes consist of two parts:

• The attribute name should not contain any uppercase letters, and must be at least one character long after the prefix "data-"
• The attribute value can be any string

Note: Custom attributes prefixed with "data-" will be completely ignored by the user agent.

Rather than just using size="A4" you can use data-size="A4"

Example

<div className="page" data-size="A4">
  // ....
</div>

React type definition file (by default - index.d.ts when staring with create-react-app) contain list of all the standard HTML elements, as well as known attributes.

In order to allow custom HTML attributes, you need to define it's typing. Do that by expanding HTMLAttributes interface:

declare module 'react' {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    // extends React's HTMLAttributes
    custom?: string;
  }
}

Possibly related question:

How do I add attributes to existing HTML elements in TypeScript/JSX?

Not entirely related, but say you want to accept extra attributes in your custom component, using the spread operator like ...rest. Here´s how you do it:

interface Props{
  icon?: string; 
}

type Button = Props & React.HTMLProps<HTMLButtonElement> & React.HTMLAttributes<HTMLButtonElement>;

function Button({ 
  icon,
  ...rest
}: Button) {
  return (
    <button 
      {...rest}
    >
     {icon && <span>{icon}</span>}
     {children}       
    </button>
}