React passing additional classNames to child component in addition to other props

5
votes

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?

2
reactjs

2 Answers

4
votes

I typically use the classnames package and the rest operator for things like this.

import classNames from 'classnames';

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

class Child extends Component {
    render() {
        const { className, ...rest } = this.props;
        const childClassNames = classNames('child-class', className);

        return (
            <div className={childClassNames} {...rest}>
            </div>
        );
    }
}

You can call rest whatever you like, e.g. ...props will create an object variable called props which would contain everything from this.props except for className.

Also, the classnames package is very widely used, and lets you do other cool things like conditionally include class names.

0
votes

If you are using functional components, the approach is almost identical to Bryan Downings answer. For simplicities sake I am only posting the implemented child component.

import { Tabs as AntdTabs } from 'antd'

/**
 * simplified exmaple, based on our custom Antd Tabs*
 * AntD Tabs with custom styling pre-applied.
 * @param props The default TabsProps.
 * @returns Antd Tabs.
 */
const Tabs = (props: TabsProps) => {

    const {
        className,
        ...rest
    } = props

    const cls = classnames(className, 'custom-tabs')
    
    return (
        <>
            <AntdTabs 
                className={cls}
                {...rest} >
            </AntdTabs>
        </>
    )
}

export { Tabs }