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.
Related
I am using RadixUI and there is orientation props, which could be vertically set. I tried to use this prop and expect that thabs will be aligned in column but it does not work:
<Tabs.Root orientation="vertical" className="TabsRoot" defaultValue="tab1">
Question: Did someone faced this issue and how to solve it?
According to Radix UI, they are a style-free library, which means that the orientation prop does not change the UI. You would need to apply the styles. vertical means that the up / down arrow will move focus within the component
You can read more about the functionality here https://github.com/radix-ui/website/issues/463
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 using the Material-UI (Mui) Box component to save time. It works great most of the time, but I sometimes run into issues when the styling clashes with the default styling of other Mui components. For example, I'm using the Box component to override the default padding-right of the Mui Toolbar (see picture below).
The problem and my question lie in the way the style tags are generated from this code. The style tags generated by this Box component are being overridden by the style tags generated by the Toolbar component (see picture below).
Additionally, when I inspect these style tags the MuiBox tags are definitely inserted before the majority of the other style tags and they seem to be empty. (see pictures below).
I've read the docs over and over, and tried many things. The most promising thing I could find was in the documentation for the Box component:
⚠️ The CSS specificity relies on the import order. If you want the guarantee that the wrapped component's style will be overridden, you need to import the Box last.
I tried this but still have had no success (see image below).
I know there are several ways to get around this (e.g., makeStyles, withStyles, inline styles, !important), but these strategies make using the Box component somewhat pointless in many situations. So my question is how do I make the MuiBox style tags have the highest priority (inserted last) and why are they empty when I look at them in DevTools?
I'm using Material-UI Popper component and using it with its keepMounted prop set.
The issue I'm having is that when the Popper's component open prop is false the popper goes of out of the window boundaries but remain visible.
Q: What approach should I use to ensure that the popper is not visibled/displayed when the Popper component's open is false?
I've looked into it (see below for more details) but without success.
I've setup a small repro and example code here:
https://codesandbox.io/embed/389w75jpom
Scroll to the bottom when the tooltip/popper "isn't shown" and notice that it's still visible. Clicking the button toggles the value of the Popper component's open property.
I'm hoping for the popper to be hidden when open is false while still using keepMounted. I would prefer if it wouldn't be shown at all (e.g display: none) not just go out of sight.
From Material-UI docs, I’ve seen that popper.js modifiers can be passed using the modifiers prop and look at modifiers~hide specifically.
In the doc it's mentioned that the hide modifier:
[...] will set a x-out-of-boundaries attribute which can be used to hide with a CSS selector the popper when its reference is out of boundaries.
As per the doc this modifier should be enabled by default but it seems that the x-out-of-boundaries attribute doesn't seem to be applied to the popper container div at all.
So I haven't been able to rely on a CSS selector in this case.
I've also found this GH issue that I believe led to the implementation of the hide modifier.
I've tried to pass down [1] to the modifier a hidePopper function similar to the one suggested in the same GH issue here to detect when the popper goes in and out of the boundaries and set its style accordingly. Here's a fork of the previous repro with the code updated to reflect this:
https://codesandbox.io/embed/jvr6oy95j3
But the boundaries attribute is not present on the data object passed to the function (see the console logs) when testing here:
https://jvr6oy95j3.codesandbox.io/
Sorry if I'm missing something and would really appreciate any guidance on this. Thanks
[1] via the hide.fn modifier attribute.
I have the following code:
header_contents.push(<DropdownButton bsSize='xsmall' bsStyle='link' pullRight={true} id={1} title='Menu'>
{item_menu}
</DropdownButton>);
I want to have the styling in Bootstrap to be white lettering (currently blue) as I think the link option is defaulted to that. How can you change the styling for Bootstrap to pass link color, and other properties like if you want to move the link down a little on the page?
I should mention we do very little CSS styling as most of that is done within the ReactJS components.
Either override bootstrap CSS in a css file (that is what your seem to avoid I understand): it is the better way to ensure a global effect over every link in your application.
Or do no sent bsStyle='link' as DropdownButton property but instead, insert a style property with custom CSS. Yet you can insert style even if you don't remove bsStyle. You could then create your own component wrapping DropdownButton to ensure the same graphic chart in your application.
I figured it out with the help of an online chat room. Here's what I did.
I first made a style (dropDownLinkStyle) in the react component like this.
let dropDownLinkStyle = {
color: 'white'
};
Then I used it (dropDownLinkStyle) in the dropdownButton like this.
header_contents.push(<DropdownButton bsSize='large' style={dropDownLinkStyle} bsStyle='link' pullRight={true} id={1 /* avoids react warning */} title='Menu'>
{item_menu}
</DropdownButton>);
I hope this helps. This allowed me to keep my bsStyle which is link (tells Bootstrap I want a link type on my screen instead of a button) and allows me to change that link to white lettering. I could also pass more styling by just adding it to the object -- dropDownLinkStyle