javascript - 为导入的组件添加样式是React

Question

我有一个独立的组件“通知”，具有自己的 CSS 样式。我想在 header 组件中显示通知组件，但具有不同的样式。我在 header 中导入了组件，但无法在其上添加样式。请帮忙。我不想更改通知组件的本地样式，因为它破坏了通知功能。

导入通知组件的代码。

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

但是你忘记在自己的导出组件中再次应用它通知列表组件

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

 <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用于处理这些造型问题。看看here

已编辑:

再读一遍，我发现你对风格有一点误解， 您可以在大多数原始 html 组件上应用样式，例如 div、span、section 等。但是对于组件来说，样式实际上不会自动应用，它是故意这样设计的，样式会转到你的 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>
 )
}