Search code examples
reactjsstyled-componentsreact-notifications

Can I use styled components to style react-notifications?


I'm using styled components in a project and have just added react-notifications. When I try to use styled components to style my NotificationContainer and its descendants. I instead get an un-styled base NotificationContainer. Am I making a mistake, or is react-notifications simply incompatible?

import React, { Component } from 'react'

import {NotificationContainer, NotificationManager} from 'react-notifications';
import styled from "styled-components";

const StyledNotificationContainer = styled(NotificationContainer)`
    background-color: orange;
`
export default class Example extends Component{
    render(){
        return (
            <StyledNotificationContainer />
        )
    }
    componentDidMount(){
        NotificationManager.info('Example')
    }
}

Solution

  • So, styled-components docs says that you can style any third party component using it as long as this components can consume className props (this is how styled is doing it's magic). react-notification docs says that NotificationContainer accepts only two props, and none of them is className .

    You can't use it is incompatible.