给导入的组件添加样式是 React

Question

我有一个独立的组件 'notification'，它有自己的 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" />

但是你又忘记在自己的导出组件中应用了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 for dealing with this styling stuff. Check it out here

已编辑：

又看了一遍，我看你对style有点误解，您可以在最原始的 html 组件上应用样式，例如 div, span, section and etc。但是对于component来说，style其实是不会自动套用的，是故意设计成这样的，style会自动给你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">

给导入的组件添加样式是 React

Add style to the imported component is React

javascript

typescript

reactjs

react-native

react-component