将样式添加到导入的组件中

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中。

(有时我往往会忘记，这是发生在我们中最好的人身上的事。)

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

我强烈推荐造型-部件来处理这种样式化的东西。检查一下这里

编辑：

在再次阅读之后，我看到您对样式有一点误解，您可以在最原始的html组件(如div, span, section and etc )上应用样式。但是，当涉及到组件时，样式实际上不会自动应用，它是故意以这种方式设计的，样式将传递给您props。你得再来一次。

示例：

const Parent = ()=>{
 return (
  <div>
   <MyCustomChild style={{fontSize:10}}>Some text</MyCustomChild>
  </div>
 )
}

export const MyCustomChild = (/* Properties */ props)=> 
{
 const {style, children} = props // extract your 'applied' property
 return (
  <div style={style /* passing it here */}> 
   {children}
  </div>
 )
}

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