From 8cecff7c32ffe67caa4f7aedb5da9c2ea67b1849 Mon Sep 17 00:00:00 2001
From: Nikita Khomyakov <dr.evil@krtn.eu>
Date: Fri, 8 Sep 2017 23:28:25 +0300
Subject: [PATCH] Join className from container with the one from child element
 Fixes https://github.com/react-bootstrap/react-router-bootstrap/issues/218

---
 src/LinkContainer.js       |  6 ++++--
 test/LinkContainer.spec.js | 26 ++++++++++++++++++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/LinkContainer.js b/src/LinkContainer.js
index 689f123..8bbd3f7 100644
--- a/src/LinkContainer.js
+++ b/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,
diff --git a/test/LinkContainer.spec.js b/test/LinkContainer.spec.js
index 4e9ecab..f616b59 100644
--- a/test/LinkContainer.spec.js
+++ b/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(