With MUI 5.0.2, When all the IconButton-s in a ButtonGroup go on the same side, the hover background shape will change.
And other elements also affects this (a Button with/without href property on one side)
It is said in another question by #Ryan Cogswell, that the styling for the border is using :not(:last-of-type) in the selector. This implies that MUI is using class on and , which seemes very slopy to me.
Is this is a bug?
I hosted a minimal environment with GitHub Pages. The question is shown on the first and forth chapter.
(all pictures shown here are showing with on hover)
Button with href
Button without href
Button without href on hover
Also I made a related issue on official repo, and in my Learning note
Related
I was having an accessibility issue when using Material-UI with React. Specifically when placing a Menu on a Drawer. Essentially the normal behaviour of a Menu is to highlight the top MenuItem. This behaviour is different if that menu is placed on a Material UI Drawer.
I have recreated the problem here using just the example Material-UI Menu and Drawer:
https://codesandbox.io/s/material-ui-menu-and-drawer-accessibility-issues-xjj3h?file=/src/App.js
The following images show the difference between the two menus when opened. I am using the chromevox extension while testing:
A normal menu when using chromevox to show accessability:
A menu when it is placed on a material UI drawer:
Would anyone be able to point out if this is an error in my code or if perhaps there are any workarounds? Was going to raise this as a new github issue but felt it was worth asking the question here first. :)
By default, the drawer enforces (so long as it is open) that focus stays within itself. So when the menu opens and grabs focus, the drawer notices that it lost focus and it grabs it back.
There are two options for fixing this:
You can turn off this drawer behavior by specifying the disableEnforceFocus prop (example here).
You can specify the disablePortal prop on the menu (example here). This will cause the menu to be a descendant of the drawer in the DOM (by default the menu uses portals and is added as a child of the <body> element), so the drawer will not try to "take back" the focus, because when focus is in the menu it will still be within the drawer.
I would recommend option 2 since the drawer's focus enforcement is generally a good thing from an accessibility standpoint.
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 have a Popover menu with material-ui and I have noticed that in default mode the library puts a layer to capture outside clicks to close the menu. I was wondering is there a way to change the background color or assign a class to this layer to give it some style?
Thanks
I don't see any possibilities in v0.19.3 (Popover.js component), but looks like the new version (they are currently working on, still in beta) will have such possibility:
<Popover
backdropInvisible={false}
backdropClassName="MyBackDropClass"
...
>
...
</Popover>
Also it looks like it will be possible to provide your own backdrop component or provide transition delay.
If the project you're working on can rely on beta version of material-ui, just test it out:
npm install material-ui#next
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
I am trying to use navigation images on left as well right of <super-navbar> but it is stated in the official documentation, that only text is supported in super-navbar buttons. But there must be some way around to do this. Below is my code, where I want to place images instead of text:
<super-navbar>
<super-navbar-button side="left" id="hamburger" onclick="supersonic.ui.drawers.open()">Menu</super-navbar-button>
<super-navbar-title>MyApp</super-navbar-title>
<super-navbar-button side="right">Search</super-navbar-button>
</super-navbar>
Instead of "menu" text I want to have hamburger type icon or png image at least. Same for search text.
Thanks.
This can be accomplished right now by removing the <super-navbar> section and writing your own html header.
If you look in the layout file for your project there is an import statement as you mentioned:
<link rel="import" href="/components/supersonic/components/import.html">
There is a section that states:
* #name super-navbar-button
* When used inside theelement, creates a button that will be displayed on the navigation bar. Only text content is supported for the button title.
Support for icons has been requested. You can subscribe to their github to get notifications of issues. https://github.com/AppGyver/steroids
One work around to be able to keep using <super-navbar> and have icons is to use something like this which will render as ≡
<super-navbar-button ng-click="toggleMenuDrawer()">
≡
</super-navbar-button>
They have a good forum on Muut as well. This issue is most likely related to trying to add icons in the <super-navbar>. I experienced a disappearing navbar after trying to add markup: <i class="icon super-search"></i>
It works in the main content area, but makes the navbar behave differently when nested in a <super> element.