search

schiehll / react-alert

alerts for React
MIT License
608 stars 98 forks source link

Add some class to main Alert wrapper #58

Closed danylomarkov closed 6 years ago

danylomarkov commented 6 years ago

It would be great to have some class in the place, where all options for Alert (offset, timeout, etc) are applied. image For example, I want to increase z-index of my Alert and I have no way to do this due to the stacking context, because my AlertTemplate with my styles is inside this div with options and style position: fixed.

schiehll commented 6 years ago

Hey @danylomarkov, I don't know if adding a class would be the right approach here, but we could add a zIndex option to the provider. This way you can set an z-index to all alerts. What you think? Also, what you think that should be the default zIndex?

Looking at the image, we should remove those props before it hit the DOM too (offset, position, timeout, etc).

I can do this two things and publish a new version, but I'm not sure what should be the default zIndex.

danylomarkov commented 6 years ago

Yes, @schiehll , zIndex option would be also nice in my particular case. But I'm wondering if there could be some other cases except this with z-index, which will also require some sort of a class in this place.

Also I like your default template for alert, but in my project I need to change minor styles for it, so I have to wrap template into some div with class to change these styles. Adding a class there would solve this problem too.

Regarding default z-index, as for me, default value like 9999 would be ok.

schiehll commented 6 years ago

@danylomarkov I don't think that should be cases where you would need to add styles to the container, so I guess that a zIndex option would solve the problem. I will be adding it later today.

About the changes you need in the alert template, you can create your own, no need to wrap anything. See https://github.com/schiehll/react-alert#using-a-custom-alert-template

praveenaj commented 5 years ago

@schiehll I'm running into a similar issue. I want to expand the wrapper by setting left and right values. But this is not possible due to the position presets like top center, bottom center etc. I'm also using the AlertTemplate but I have no control over the wrapper. It would be great if I can override wrapper styles.