javascript - Material UI strange blue line when overflow attribute is added - Stack Overflow

admin管理员组

文章数量:1421542

I'm using Material-UI with my React application. I'm also using styled ponents and I'm viewing the app in a Chrome browser. The issue I'm having doesn't occur when using a Firefox browser.

When applying the overflow attribute in my styled ponent, I'm seeing this blue line towards the bottom of the modal. This only appears when I'm playing with the size of my browser window. As I gradually bring my browser window closer to normal size, the line goes away. I'm not sure why this is or what I can do to fix it.

Here is a snippet of my code:

export const ScrollableModal = styled(MUIModal)(() => ({
  overflow: 'scroll',
}));

const Modal = ({ title, children, actionsLeft, actionsRight, ...rest }) => {
  const wrappedTitle =
    typeof title === 'string' ? <Typography>{title}</Typography> : title;

  return (
    <ScrollableModal {...rest}>
      <Container>

I've left the rest out because it's not relevant to my question.

Here is a screenshot of what I'm describing:

I'm using Material-UI with my React application. I'm also using styled ponents and I'm viewing the app in a Chrome browser. The issue I'm having doesn't occur when using a Firefox browser.

When applying the overflow attribute in my styled ponent, I'm seeing this blue line towards the bottom of the modal. This only appears when I'm playing with the size of my browser window. As I gradually bring my browser window closer to normal size, the line goes away. I'm not sure why this is or what I can do to fix it.

Here is a snippet of my code:

export const ScrollableModal = styled(MUIModal)(() => ({
  overflow: 'scroll',
}));

const Modal = ({ title, children, actionsLeft, actionsRight, ...rest }) => {
  const wrappedTitle =
    typeof title === 'string' ? <Typography>{title}</Typography> : title;

  return (
    <ScrollableModal {...rest}>
      <Container>

I've left the rest out because it's not relevant to my question.

Here is a screenshot of what I'm describing:

• javascript
• reactjs
• google-chrome
• material-ui

Share Improve this question Follow edited Nov 26, 2019 at 21:52 norbitrial 15.2k1010 gold badges3939 silver badges6464 bronze badges asked Nov 25, 2019 at 23:26 ghostagent151ghostagent151 1,42633 gold badges2121 silver badges4040 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I guess that's the outline property what they mentioned in the documentation for simple modal:

Notice that you can disable the outline (often blue or gold) with the outline: 0 CSS property.

First needs to be added to the current style:

const useStyles = makeStyles({
  modal: {
    textAlign: 'center',
    width: '35vw',
    backgroundColor: 'white',
    opacity: 0.8,
    outline: 0, // add / remove
  }
});

Then it can be applied on the Container just like the following in the render:

const styles = useStyles();

return <>
  <Modal open={true}>
    <Container className={styles.modal}>
      <p>Simple Modal</p>
    </Container>
  </Modal>
</>

Result by adding and removing outline property with value 0:

I guess with styled ponents just create a styled Container with opacity: 0 if you don't want to use makeStlyes for this purpose.

That resolved the issue for me.

I hope that helps!

本文标签： javascriptMaterial UI strange blue line when overflow attribute is addedStack Overflow