为导入的组件添加样式是 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">