title: Overriding Ant Framework Css with Custom Css Issue
body: <p>I have a React component and I am integrating the Ant design framework on top of React. I have a Ant row with 3 columns. I also have a css file that has custom css in it. I want to take the custom css and add my css on top of it. None of the css i have in my css file is being implemented into the component when it renders.</p>
  
  <p>Here is the react component:</p>
  
  <pre><code>import React, { Component } from 'react';
  // import Logo from '../../../static/images/bootup-logo.png';
  import styles from './Topbar.css';
  import Name from '../../static/images/bootup-name.png';
  
  import { Row, Col } from 'antd';
  render(){
      return(
          &lt;div className="top-bar-container"&gt;
              &lt;Row className={styles.topBarContainer}&gt;
                  &lt;Col className={styles.imageContainer} span={6}&gt;
                      &lt;img className={styles.nameImage} src={Name} alt=""/&gt;
                  &lt;/Col&gt;
                  &lt;Col span={12}&gt;&lt;/Col&gt;
                  &lt;Col span={6}&gt;&lt;/Col&gt;
              &lt;/Row&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>the jsx and css file are in the same folder</p>
  
  <p>here is the css that I am using:</p>
  
  <pre><code>.topBarContainer {
      background-color: #64B5F6; 
  }
  
  .imageContainer {
      padding-left: 8px;
  }
  
  .nameImage {
      height: 48px;
  }
  </code></pre>
  
  <p>Can anyone help me figure out why the css that I am trying to implement is not working and being implemented when rendering in a web browser.</p>