Add style to the imported component is React

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.

Code for importing notification component.

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(
            <div className="col-md-8 col-sm-8">
                <div className="row">
                    <div className="col-md-11 col-sm-11 search-container">
                    <input type="text" className="form-control" name="search" placeholder="Search" />
                    <i className="fa fa-search"></i>
                    </div>
                    <div className="col-md-1 col-sm-1 bell-container flex all-center relative">
                        <img src={bell} alt="bell icon" />
                    </div>
                </div>
                <NotificationList style={style} className="notification-component" />
            </div>


        )
    }
}
export default Search;

Notification list component

import React from 'react';

class NotificationList extends React.Component{
    constructor(props)
    {
        super(props)
        this.state={

        }
    }
    render()
    {
        const title={
            marginBottom:'0px'
        } 
        return(
            <div className="col-md-10 col-md-offsest-1 default-shadow offset-md-1 bg-white pd-10-0 border-radius-10">
                    <div className="row">
                        <div className="col-md-12 flex pd-10-0 notification-main-block">
                            <div className="col-md-11">
                                <p className="paragraph" style={title}>Notification title comes here.</p>
                                <p className="small-paragraph" style={title}>2 min ago</p>
                            </div>
                        </div>
                        <div className="col-md-12 flex pd-10-0 notification-main-block">
                            <div className="col-md-11">
                                <p className="paragraph" style={title}>Notification title comes here.</p>
                                <p className="small-paragraph" style={title}>2 min ago</p>
                            </div>
                        </div>
                        <div className="col-md-12 flex pd-10-0 notification-main-block">
                            <div className="col-md-11">
                                <p className="paragraph" style={title}>Notification title comes here.</p>
                                <p className="small-paragraph" style={title}>2 min ago</p>
                            </div>
                        </div>
                    </div>
                    </div>

        )
    }
}
export default NotificationList;

I see you have included the style prop in your notification component,

<NotificationList style={style} className="notification-component" />

But you forgot to apply it again in your own export component Notification list component

(I tend to forget sometime, it happened to the best of us.)

 <div style={this.props.style} className="col-md-10 col-md-offsest-1 default-shadow offset-md-1 bg-white pd-10-0 border-radius-10">

I highly recommend styled-components for dealing with this styling stuff. Check it out here

Edited:

After reading again, I see you misunderstand a little bit of the style, you can apply style on most primitive html component, such as div, span, section and etc. But when it comes to component, the style actually will not automatically applied, it is purposely designed that way, and the style will be goes to you props. You have to apply it again.

Example:

const Parent = ()=>{
 return (
  <div>
   <MyCustomChild style={{fontSize:10}}>Some text</MyCustomChild>
  </div>
 )
}

export const MyCustomChild = (/* Properties */ props)=> 
{
 const {style, children} = props // extract your 'applied' property
 return (
  <div style={style /* passing it here */}> 
   {children}
  </div>
 )
}