I'd like to pass additional classNames into a child component, and also pass down any other props.

For example:

```
class Parent extends Component {
    render() {
        <Child
            className="parent-class"
            flavor="chocolate"
        />
    }
}

class Child extends Component {
    render() {
        <div className="child-class" {...props}>

        </div>
    }
}

```

In this case, I would like the Child component div to have the "flavor" prop, and also have *both* classes "parent-class" and "child-class". However as it is, the className="child-class" will be overwritten by {...props}.

The only workaround I can think of is putting the {...props} before the className in the Child component:

```
<div {...props} className={`child-class ${props.className}`}>

```

Is this the only workaround? Or is there a cleaner solution?