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;