Comments (15)
@matsgm and others, this is actually possible but undocumented:
<SnackbarProvider classes={{ containerRoot: classes.snackbarContainer }}>
from notistack.
@BornaP I believe you can do so using classes
property of snackbar. see docs here
const styles = {
snack: {
position: 'absolute',
height: 50,
bottom: 70,
left: 10,
backgroundColor: 'red',
},
};
const App = ({ classes }) => (
<SnackbarProvider
maxSnack={3}
classes={{
root: classes.snack,
}}
>
<MessageButtons />
</SnackbarProvider>
);
export default withStyles(styles)(App)
link to SANDBOX EXAMPLE: https://codesandbox.io/s/j9k0063q5
from notistack.
I would like to reopen this issue. On devices with bottom navigation, I can´t seem to place the notification container above the bottom navigation, so I can use multiple notifications.
from notistack.
The bottom css in root is useless as it is overwritten with inline style. Is there any way to set the bottom or top css without being overwritten? I need to set the top css parameter to a specific value...
from notistack.
Documentation can be found here: https://iamhosseindhv.com/notistack/api#classes
from notistack.
Yeah maybe title of the issue is not applicable anymore.
The reason I have this issue open is that I'd like us all to have a way to dynamically change the position of snackbar container.
Say you're developing a web app with bottom navigation. Currently you can change bottom position of snackbar container. but not all of the pages have bottom navigation. You should have a way of toggling between different mode/positions as user navigates between different pages.
from notistack.
@BornaP Please edit this sandbox and apply what you're trying to achieve, then share the example url here.
from notistack.
I'm trying to apply CSS class directly to <Snackbar />
element. One example of it would be changing elements position property from fixed to absolute (ie. I'm trying to position snackbars relative to container, not window).
I believe it can easily be solved with passing classesSnackbar
or something similar to https://github.com/iamhosseindhv/notistack/blob/master/src/SnackbarItem/SnackbarItem.js#L53
What do you think? If it makes sense, I can make PR for it.
from notistack.
That's the issue. Classes root set's it to SnackbarItem, not Snackbar component. I need to position Snackbar's <div>
relative to container. Root element of whole plugin therefore is not accessible with classes
prop.
from notistack.
I see @BornaP , classes.root
in this line has to be renamed to avoid name collision with Snackbar classes.root
prop.
And classes
needs to get passed down to the Snackbar component.
from notistack.
Fix commit: 2eaaa50
By upgrading to v0.3.7
@BornaP , you should by able to apply css classes to Snackbar root (in the same way in example above).
from notistack.
Closed due to fix and/or inactivity. feel free to reopen.
from notistack.
The bottom css in root is useless as it is overwritten with inline style. Is there any way to set the bottom or top css without being overwritten? I need to set the top css parameter to a specific value...
You can try to use marginBottom or marginTop, which might work if you only have one notification.
from notistack.
@iamhosseindhv apologies, I missed containerRoot there.
I guess this issue can be closed then?
from notistack.
As per comment above
from notistack.
Related Issues (20)
- NextJs server component support - enqueueSnackbar is not a function (missing "use client" directive) HOT 1
- Feature Request
- Can we use the existing snackbar to use the notistack
- Styles not applied when rendering in custom element with shadow dom HOT 2
- domRoot is ineffective HOT 2
- [help] How can I make new snackbar always appears at the start position instead of at the rear? HOT 2
- Document has multiple elements referenced with ARIA with the same id attribute: notistack-snackbar
- autoHideDuration values not respected in Chrome 116.0.5845.179 HOT 2
- Feature request: option to bypass `maxSnack` HOT 2
- Question is it possible to identify if there is snack on the screen
- JS Example for Custom Notistack HOT 1
- Feature request: compiled react / pure JS documentation
- How to trigger "close Snack bar" from custom snack bar component. HOT 3
- Update clsx version
- snackbar id value appears on the screen
- Impossible to tell if user intentionally closed a notification
- Type issue when extending SnackbarProvider Components with custom component HOT 6
- The global settings on the provider doesn't work HOT 4
- [Documentation] Update custom snackbar component example HOT 2
- Incorrectly generated styles only in production build
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from notistack.