Custom "glamor" rules not overriding default

[ifier]

Hi. I'm trying to customize toastify and I have some issues with that: 1) http://prntscr.com/hj9gla 2) http://prntscr.com/hj9gu2 3) http://prntscr.com/hj9gxq

It's adding new class name but it didn't added new attribute to the div :( That's why I can't override default styles. Maybe I'm doing something wrong? But I've read "glamor" documentation and your as well and it seems like that all okay with my code. Can you help?

Also I think it would be awesome (like new feature) - disable glamor if someone don'r wanna it.

[fkhadra]

Hello @ifier,

I did the following:

<ToastContainer toastClassName={
          css({
            background: "#3f4650"
          })
        }
        progressClassName={css({
          height: "2px"
        })}
        />

And I got the expected result. Maybe you are overidding the style somewhere else ? Could you provide a snippet so I can help you better ?

Regarding your last request, I'll see if there is a good way to choose a style strategy(glamor or css)

[fkhadra]

@ifier when I look your screenshot, you are overriding the background color with the same value.

[ifier]

Importing custom styled container

import ToastContainer from 'Components/toastify-container/styled'; 

<ToastContainer />

Styled component

import React from 'react';
import { ToastContainer, style } from 'react-toastify';
import { css } from 'glamor';

const CloseIcon = ({ closeToast }) => (
  <i className="fa fa-close toastify-close" onClick={closeToast} />
);

const StyledToast = () => (
  <ToastContainer
    autoClose={999999}
    toastClassName={
      css({
        background: '#3f4650'
      })
    }
    bodyClassName={css({
      margin: '0 !important'
    })}
    progressClassName={css({
      height: '2px'
    })}
    closeButton={<CloseIcon />}
  />
);

export default StyledToast;

Call it onClick

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { toast } from 'react-toastify';
import ToastifyContainer from '../toastify-container';

toast(<ToastifyContainer content={`${this.props.infoText}`} className={'info'} />, {
      onClose: () => { this.setState({ disabled: false }); }
    });

Toastify body component

import React from 'react';
import PropTypes from 'prop-types';

const ToastifyContainer = props => (
  <div className="toastify-custom-body">
    <div className={`toastify-icon inline-block middle fa ${props.className ? props.className : ''}`} />
    <div className="toastify-text inline-block middle">{props.content}</div>
  </div>
);

And image - http://prntscr.com/hjabny :) Thank you for so quick response

[ifier]

Okay. I've made with CSS class names and !important (which is not great) for now. I've notices strange behavior with glamor - it works not well with hot reload :(

I've made like I wrote before and refresh a page - styles are not working. But when I changed some styles and hot-reload refreshed component/page it applied new styles that I wrote...

Also glamor is heavy-weight module :( Maybe I'm old school guy and I think css must be in css files :)

P.S.: hot reload that we are using - webpack-dev-middleware / webpack-hot-middleware P.S.S.: Thank for such great plugin/module. We really like it and it works fine :)

[fkhadra]

Thank you for the feedback. Switching to css in js was a difficult decision. It has pro and cons like every solution, unfortunately.

I'll see how I can allow user to choose between css or glamor hoping that is not to heavy