title: Add style to the imported component is React
body: <p>I have one independent component 'notification' with its own CSS style. I want to show the notification component in my header component but with different styling. I imported the component in the header, but I unable to add style on it. Please help. I didn't want to change the notification component local style as it broke the notification functionality.</p>
  
  <p>Code for importing notification component.</p>
  
  <pre><code>import React from 'react';
  import bell from '../../../assets/icons/bell.svg';
  import NotificationList from '../notification/NotificationList';
  
  class Search extends React.Component{
      constructor()
      {
          super()
          this.state={
              notificationStatus:false
  
          }
      }
      render()
      {
  
          const style={
              position:'absolute',
              top:'70px',
              left:'0px',
              width:'100%',
              height:'auto',
              zindex:'2'
          }
          return(
              &lt;div className="col-md-8 col-sm-8"&gt;
                  &lt;div className="row"&gt;
                      &lt;div className="col-md-11 col-sm-11 search-container"&gt;
                      &lt;input type="text" className="form-control" name="search" placeholder="Search" /&gt;
                      &lt;i className="fa fa-search"&gt;&lt;/i&gt;
                      &lt;/div&gt;
                      &lt;div className="col-md-1 col-sm-1 bell-container flex all-center relative"&gt;
                          &lt;img src={bell} alt="bell icon" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;NotificationList style={style} className="notification-component" /&gt;
              &lt;/div&gt;
  
  
          )
      }
  }
  export default Search;
  
  </code></pre>
  
  <p>Notification list component</p>
  
  <pre><code>
  import React from 'react';
  
  class NotificationList extends React.Component{
      constructor(props)
      {
          super(props)
          this.state={
  
          }
      }
      render()
      {
          const title={
              marginBottom:'0px'
          } 
          return(
              &lt;div className="col-md-10 col-md-offsest-1 default-shadow offset-md-1 bg-white pd-10-0 border-radius-10"&gt;
                      &lt;div className="row"&gt;
                          &lt;div className="col-md-12 flex pd-10-0 notification-main-block"&gt;
                              &lt;div className="col-md-11"&gt;
                                  &lt;p className="paragraph" style={title}&gt;Notification title comes here.&lt;/p&gt;
                                  &lt;p className="small-paragraph" style={title}&gt;2 min ago&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className="col-md-12 flex pd-10-0 notification-main-block"&gt;
                              &lt;div className="col-md-11"&gt;
                                  &lt;p className="paragraph" style={title}&gt;Notification title comes here.&lt;/p&gt;
                                  &lt;p className="small-paragraph" style={title}&gt;2 min ago&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className="col-md-12 flex pd-10-0 notification-main-block"&gt;
                              &lt;div className="col-md-11"&gt;
                                  &lt;p className="paragraph" style={title}&gt;Notification title comes here.&lt;/p&gt;
                                  &lt;p className="small-paragraph" style={title}&gt;2 min ago&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;/div&gt;
  
          )
      }
  }
  export default NotificationList;
  
  
  </code></pre>