How do i change the the used easing functions a drawer uses?
I need to change both ease function to the same value. Using MuiThemeProvider didnt seem to work. The Drawer component also doesnt take any transition argument but tranistion duration.
Can anyone help?
Drawer receives a TransitionComponent. As you can see here the default value is Slider component. So you can make your own custom transition component with your custom easing (You can use Slider as well and customize it) and pass it to your drawer.
Related
I'm working with Material-UI on my NextJS project, and wanted to know if is there a way to replicate the paper background-image on other components ? It will allow me to make some other components the exact same colors as Paper, because this background-image affect the color with a lighter effect.
EDIT: this effect seems to only occurs on dark mode
Thanks
Some components like Card, Dialog, Menu (and more) already use Paper as an inner component, then they get its style. The best way to add it to your components is to just use Paper as a surface.
You can also add variants to Mui components - for example, you add paper variant to TextField, and there add the styles.
A simpler way (but not complete) is to directly add the Mui-Paper className to another component (it is not complete because there are other styles except Mui-Paper. To achieve the elevation background-image effect you mantioned, you should add .MuiPaper-elevation{props.elevation} className.
I'm trying to do toggle drawer and resize of it together using React JS and Material UI. The reference code is in class based component at
https://stackblitz.com/edit/react-2h1g6x?file=ResponsiveDrawer.js
I'm trying to do similarly using function based components and hooks and the codesandbox link is below:
https://codesandbox.io/s/resizeeee-ilot8?file=/src/App.js
But this is not working properly. Initially on toggle the drawer expands and on toggle again it collapses which is fine. But the issue starts when I toggle the drawer and trying to resize it. The width of the drawer changes continuously with mousemove on both outside of drawer and inside of drawer. I understood that my state is changing continuously and so mousemove. Is there any way to restrict this and let it work similarly to the class based component. Any help is much appreciated. Thanks!
Change condition on line number 97
if (!state.isResizing || !open)
just change "&&" to "||"
I'm using the following component:
https://material-ui.com/components/popper/
In the DOM, it has the role of tooltip. I expect that it would automatically get the tooltip zIndex from the theme here:
https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/styles/zIndex.js
But it gets no z-index. What gives?
Seems like you're using a component that is too low-level. The zIndex.tooltip you've mentioned is being used in the Tooltip component. So you have two options:
Switch your code to be using Tooltip directly and don't worry about applying zIndexes around
Keep your Popper implementation apply the zIndex manually. Or use withStyles, just like the Tooltip component does.
For a greater flexibility and control over how stuff gets done, I would prefer the second approach, to be fair.
I have a react component that is supposed to act like react native touchable opacity component. Right now it works great, but only on touchscreen. Should I also make it work for mouse down/up events as well?
If you want more interactivity, probably you can make us of onMouseEnter and onMouseLeave event. or else you can simply use css :hover to add style to the element
The documentation for the react-bootstrap overlay trigger says that the overlay prop can be an element or text. However, whenever I pass it something other than a "Tooltip" component it doesn't work. In fact, if you modify their code example on the website linked below to be just a div instead of a Tooltip or a string, it doesn't work on their site either. Does it have to be passed a Tooltip?
https://react-bootstrap.github.io/components.html#tooltips-overlay-trigger
Easiest thing to pass is a Tooltip or a Popover.
You could also pass it something else, but then you have to wrap it in an Overlay instead of an OverlayTrigger. See the react-bootstrap docs on Custom Overlays for more specific examples.