Can't override style

[hlavki]

Hi,

when use in main.js e.g.

miniToastr.init({
  style: {
    '.mini-toastr__notification': {
      'width': '500px'
    }
  }
})

no style is applied and original is also removed.

Do I really need to override all styles?

e.g.

miniToastr.init({
  style: {
    '.mini-toastr': {
      position: 'fixed',
      'z-index': 99999,
      left: '12px',
      top: '12px'
    },
    '.mini-toastr__notification': {
      cursor: 'pointer',
      padding: '12px 18px',
      margin: '0 0 6px 0',
      'background-color': '#000',
      opacity: 0.8,
      color: '#fff',
      'border-radius': '3px',
      'box-shadow': '#3c3b3b 0 0 12px',
      width: '500px',
      '&.-error': {
        'background-color': '#D5122B'
      },
      '&.-warn': {
        'background-color': '#F5AA1E'
      },
      '&.-success': {
        'background-color': '#7AC13E'
      },
      '&.-info': {
        'background-color': '#4196E1'
      },
      '&:hover': {
        opacity: 1,
        'box-shadow': '#000 0 0 12px'
      }
    },
    '.mini-toastr-notification__title': {
      'font-weight': '500'
    },
    '.mini-toastr-notification__message': {
      display: 'inline-block',
      'vertical-align': 'middle',
      width: '240px',
      padding: '0 12px'
    }
  }
})

[codeofsumit]

same problem. I'd like to override ALL styles. Best case, just let me apply my own classes to the different elements.

[sookoll]

Defining styles in javascript - bad. Not merging custom styles with default - worst. Let users apply classes to container - good.