為導入的組件添加樣式是 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組件中包含了 style 屬性，

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

但是你忘記在自己的導出組件Notification list component再次應用

（我往往會忘記某個時候，它發生在我們中最好的人身上。）

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