Material-ui menu item link has blue mark around it - reactjs

When using the simple menu from the react material ui components with link from react router dom it leaves these two blue lines on the first link even though all the links are the same. .
The weird thing is that as soon as you click out of it the blue lines will go away. It happens only on the first link.
I have already tried to change the link to a simple anchor tag instead of the react link. That didn't work. I also tried to style the link with css and with inline styles and that didn't work
This is everything inside of the return of the menu
<div>
<Button
aria-owns={anchorEl ? 'simple-menu' : undefined}
aria-haspopup="true"
onClick={this.handleClick}
>
Open Menu
</Button>
<Menu
id="simple-menu"
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={this.handleClose}
>
<Link to="/"><MenuItem onClick={this.handleClose}>Home</MenuItem></Link>
<Link to="/profile"><MenuItem onClick={this.handleClose}>Profile</MenuItem></Link>
<Link to="/customize"><MenuItem onClick={this.handleClose}>Customize</MenuItem></Link>
<Link to="/logout"><MenuItem onClick={this.handleClose}>Logout</MenuItem></Link>
</Menu>
</div>
I an just wondering if there is a way to remove the two blue lines.

Then. I'll write in the answers
try this :
a, a:hover, a:focus { outline: none; }

To solve this issue Gakeko Betsi suggested to edit the css for the a element with this line a, a:hover, a:focus { outline: none; }

Gakeko Betsi's answer is correct, however, it is worth noting that the outline has value especially in the case of accessibility. If you do remove it via CSS make sure you provide some styling that is obvious.
Another thing to remember is that accessibility is not just something for those that have disabilities, but also for your sites' power users or people that aren't using the mouse as their main mode of navigation.
The link below goes into great depth and is a very worthwhile read - https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/

Related

Setting a className when using Dropdown.item as Link

I am using code below to avoid " nested" JS error and keeping Link properties inside a react-bootstrap Dropdown.
<Dropdown.Item className="dropdown-item" as={Link} href={`/example`}>
Example
</Dropdown.Item>
Result is as follow on the DOM:
Example
Problem is: className="dropdown-item" has been ignored.
How could I get this result: Example while keeping the code "react-friendly"?
You can try to wrap it around.
<Link to={`/example`}><Dropdown.Item className="dropdown-item">
Example
</Dropdown.Item></Link>
you can use bsPrefix to override the bootstrap styling ...
Docs reference ...
A sample e.g. here in below link - see dropdown first item's bg color... Please fork it for reference

MUI Breadcrumbs - How To Hide First Item And Separator

I'm using the MUI Breadcrumbs component on a site I'm working on and I'm just about done but I'm trying to hide the first item in the path. I'm able to hide the actual word itself, but I can't figure out how to hide the separator.
For example, this is how it's structured now:
"W > X > Y"
This is how I want it to look:
"X > Y"
This is what I'm currently showing because I can't hide the first separator:
"> X > Y"
Anyone have any ideas on how to hide that first separator?
You can add a custom class to the Breadcrumbs component like this:
<Breadcrumbs className="breadcrumbsCustomStyle"
and using css set display: none; for the first two li children of this class like this:
.breadcrumbsCustomStyle li:first-child,
.breadcrumbsCustomStyle li:nth-child(2) {
display: none;
}
You can take a look at this sandbox for a live working example of this approach.

Material-UI adds padding to the body tag when a dialog is opened

I am using Material-UI in my react application. Recently, I updated my packages to the latest version. Now, when I open a dialog in my application, padding-right: 17px; will be added to the body tag.
I also checked the Material-UI site, and this is happening on their website too with dialogs.
Is this a bug with the new version of Material-UI?
How can I remove this padding from the body tag when opening a dialog?
Update: This padding will be added to the body tag with Drawer, Menu, Dialog, and Popover components.
as it was mentioned by #Reins you can use disableScrollLock property. The thing is sometimes this property is nested on components's input so you need to use inputProps in order to set it. Here is an example with Select component:
<Select
className={classes.select}
inputProps={{MenuProps: {disableScrollLock: true}}}
...
/>
Sometimes you may want to dig into MUI codebase in order to figure out how to apply some nested element's properties.
Just give disableScrollLock={ true }.
I think it will solve the issue because I had the same.
I added disableScrollLock prop to my Dialog Component.
It worked.
You can use a mui-fixed class for handling this issue, it's helpful for me.
Here is a link for material UI mui-fixed document :
https://material-ui.com/getting-started/faq/#why-do-the-fixed-positioned-elements-move-when-a-modal-is-opened
Hope this will help anyone.
For me the solution was to add
overflow: auto;
to the #root selector:
#root {
... other css that was there before
overflow: auto;
}
I add in my main css file the following snippet of code and I get rid of body margins:
body {
margin: 0;
}
I realized this came from a parent Container. I just added this and it worked for me. Also realized this is adaptive to screen size, so this code is applied to all the sizes from xs and up breakpoints.
sx={{
[theme.breakpoints.up("xs")]: {
padding: 0
},
}}

Safari CSS only updates after clicking for text-align: justify (with sandbox example)

EDIT: short story I made a code sandbox:
https://codesandbox.io/s/928m541rny?fontsize=14
open in Safari for mac and you will see this if you stretch a little bit the window:
If you click on the text, it justifies correctly.
I have a very intriguing bug on Safari for mac (12.0.3), the text doesn't properly justify (screenshot 1) at first render, it only correctly justifies after clicking on it (screenshot 2).
I am using React with Material-UI and overriding the style of all my body2 directly in my theme.js file as follow:
body2: {
textAlign: "justify"
}
This implementation works correctly on Chrome. The string is coming from my backend which retrieves it from google firestore. The new lines are represented by \n characters. I am looking to solve this issue and not find a work around (as replacing \n character by <br /> html tags)
What I tried:
searching for issues related to text-align: justify on Safari
trying to play with the text-justify property
I actually have no clue where to look to solve this and never had a bug of this sort (change of css after click without any onClick logic implemented.). That's why I listed so many tags, because I have no real idea for the moment.
After clicking on it, it displays correctly:
Additional information:
<Typography paragraph>
{description}
</Typography>
I also override the root Typography like this (if I don't, new lines from firestore strings are not displayed):
MuiTypography: {
root: {
whiteSpace: "pre-line"
},
body2: {
fontSize: 15,
textAlign: "justify"
}
},

Responsive facebook comment box

I've been researching several different ways to force a facebook comment box plug-in to be fluid/responsive/liquid/whatever-we-call-it (just showing the stupidity of names), and all of them work fine. But also, all of them make the plug-in disappear when accessing from Google Chrome.
I'm using this:
.fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
width: 100% !important;
}
Which has the same results (apparently) as:
#fbcomments, .fb-comments, .fb-comments iframe[style], .fb-comments span{
width: 100% !important;
}
Question: How can I fix this strange behavior? (Why does it happen?)
Thanks for your time. Wether you do help me or not, have a nice to-day! :)
this worked for me: Add to the fb-comments div data-width="100%"
<div class="fb-comments" data-href="http://example.com/comments" data-width="100%" data-numposts="5" data-colorscheme="light"></div>
and it will be responsive when you resize the browser.
you can put the fb-comments div inside another div and give that div the width you want.
This is facebook comment part-
<div class="fb-comments" data-href="http://example.com/comments" data-numposts="5" data-colorscheme="light"></div>
Just add this CSS bellow the div-
<style>.fb_iframe_widget span[style]{width:100% !important;}</style>
Just Insert data-width="100%" in the div
<div class="fb-comments" data-width="100%"></div>
You could use data-mobile atribute
<div class="fb-comments" data-href="http://example.com/comments" data-numposts="5" data-mobile="true"></div>

Resources