Merge pull request #228 from v12/child-class-name

Join className from container with the one from child element

Author: v12

src/LinkContainer.js

@@ -88,6 +88,8 @@ export default class LinkContainer extends Component {
       typeof to === 'string' ? { pathname: to } : to
     );
 
+    const child = React.Children.only(children);
+
     return (
       <Route
         path={typeof to === 'object' ? to.pathname : to}
@@ -97,10 +99,10 @@ export default class LinkContainer extends Component {
           const isActive = !!(getIsActive ? getIsActive(match, location) : match);
 
           return React.cloneElement(
-            React.Children.only(children),
+            child,
             {
               ...props,
-              className: isActive ? [className, activeClassName].join(' ') : className,
+              className: [className, child.props.className, isActive && activeClassName].join(' '),
               style: isActive ? { ...style, ...activeStyle } : style,
               href,
               onClick: this.handleClick,

test/LinkContainer.spec.js

@@ -72,6 +72,32 @@ describe('LinkContainer', () => {
           .to.equal(findDOMNode(component));
       });
 
+      it('should join child element className with the one from container', () => {
+        function renderComponent(location) {
+          const router = ReactTestUtils.renderIntoDocument(
+            <Router initialEntries={[location]}>
+              <Route
+                path="/"
+                render={() => (
+                  <LinkContainer to="/" className="container-css">
+                    <Component className="foo-css">Foo</Component>
+                  </LinkContainer>
+                )}
+              />
+            </Router>
+          );
+
+          const component = ReactTestUtils.findRenderedComponentWithType(
+            router, Component
+          );
+          return findDOMNode(component);
+        }
+
+        const { className } = renderComponent('/test');
+
+        expect(className.trim()).to.match(/\bcontainer-css foo-css\b/);
+      });
+
       describe('when clicked', () => {
         it('should transition to the correct route', () => {
           const router = ReactTestUtils.renderIntoDocument(