Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6211

Add style to the imported component is React

$
0
0

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;

Viewing all articles
Browse latest Browse all 6211

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>