Добавить стиль для импортируемого компонента React

Question

У меня есть один независимый компонент «уведомление» со своим собственным стилем CSS. Я хочу показать компонент уведомления в моем компоненте заголовка, но с другим стилем. Я импортировал компонент в заголовке, но не смог добавить стиль к нему. Пожалуйста помоги. Я не хотел изменять локальный стиль компонента уведомлений, поскольку он нарушал функциональность уведомлений.

Код для импорта компонента уведомлений.

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;

Компонент списка уведомлений

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;

Answer 1

Я вижу, вы включили опору стиля в свой компонент notification,

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

Но вы забыли применить его снова в своем собственном компоненте экспорта Notification list component

(I как правило, иногда забывают, это случилось с лучшими из нас.)

 <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">

Я настоятельно рекомендую styled-components для работы с этим стилем. Проверьте это здесь

Отредактировано:

После прочтения снова я вижу, что вы немного не понимаете стиль, вы можете применить стиль к самый примитивный html компонент, такой как div, span, section and etc. Но когда дело доходит до компонента, стиль на самом деле не применяется автоматически, он специально разработан таким образом, и стиль будет вам понятен props. Вы должны применить это снова.

Answer 2

Вы только передали стиль, но не использовали его в компоненте Notification.

Вы можете получить к нему доступ, используя props, который в вашем случае равен this.props.style.

Пример.

<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">