Can two different NotificationSystem components has different inline styles?

[fmlharrison]

Hey,

I love this library and I am currently using it for the project I am working on, but I have run into a slight problem. I know you can add styles to override the exciting styles, but when I add some style overrides to one of my 2 NotificationSystem components, these styles are applied to both.

One of the components is used to show notifications on success or failure when saving something to the server (displays at the top of the page) and the other is used to give extra information when a user clicks on data in a table (this displays at the bottom of the screen). I have applied a custom style object to the one that shows up at the bottom to make it the full width of the screen, but this is also applied to the one that shows up at the top (I want this one to have the default styles). How do I get my custom styles only to apply to the one I want them to apply to??

Here is my render method in my top level App.js file:

render() {
        return (
            <div className="col span_12_of_12" style={style.page}>
                <div className="col span_12_of_12" style={style.title}>
                    <div className="col span_8_of_12">
                        <Logo />
                    </div>
                    <div className="col span_4_of_12">
                        <NavBar />
                    </div>
                </div>
                <NotificationContainer props />
                {this.props.children}
                <FullDataFooterPopUp props />
            </div>
        );
    }

NotificationContainer is the one that pops up at the top and FullDataFootPopUp is the one that have the custom styles passed to it and appears at the bottom of the screen.

NotificationContainer.js:

class NotificationContainer extends Component {
    componentDidMount() {
        this.notificationSystem = this.notificationSystem;
    }

    componentWillReceiveProps(newProps) {
        const { message, level } = newProps.notification;
        this.notificationSystem.addNotification({
            level,
            autoDismiss: 2,
            dismissible: false,
            position: "tl",
            children: (
                <div style={style.NotificationPopUp}>
                    {message}
                </div>
            ),
        });
    }

    render() {
        return (
            <div>
                <NotificationSystem
                  ref={(notification) => { this.notificationSystem = notification; }}
                />
            </div>
        );
    }
}

FullDataFooterPopUp.js:

class FullDataFooterPopUp extends Component {
    componentDidMount() {
        this.fullData = this.fullData;
    }

    componentWillReceiveProps(newProps) {
        const { message, level } = newProps.fullData;
        this.fullData.addNotification({
            level,
            position: "bl",
            dismissible: true,
            autoDismiss: 5,
            children: (
                <div style={style.DataDisplay}>
                    <span><strong>SomeData:</strong>{message.SomeData}<br /></span>
                    <strong>MoreData:</strong>{message.MoreData}
                </div>
            ),
        });
    }

    render() {
        return (
            <div>
                <NotificationSystem
                  ref={(data) => { this.fullData = data; }}
                  style={style.fullDataPopUp}
                />
            </div>
        );
    }
}

Thanks in advance for the help.

[davidworkman9]

I also need this.