reactjs - React + TypeScript usage of className prop

Question

What is the correct way to type and use the className prop in a custom component? I used to be able to do this:

class MyComponent extends React.Component<MyProps, {}> {
  ...
}

and then use my component via:

<MyComponent className="my-class" />

Note that I would not define className in MyProps, though React was previously typed to support this usage.

Now, I am now seeing this type error:

Property 'className' does not exist on type 'IntrinsicAttributes & 
IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{ 
childr...'

What is the correct way to define / type my component that will allow me to use className when using my component?

question from:https://stackoverflow.com/questions/44369706/react-typescript-usage-of-classname-prop

Answer 1

You can use the HTMLAttributes type, for example:

class MyComponent extends React.Component<MyProps & React.HTMLAttributes<HTMLDivElement>, {}> {
    render() {
        return <div className={ this.props.className }>My Div</div>
    }
}

That way you can pass any of the properties that a html element might need.

If you only need the className property then you can do this:

class MyComponent extends React.Component<MyProps & { className: string }, {}> {
    render() {
        return <div className={ this.props.className }>My Div</div>
    }
}

Or simply add it to your MyProps type.