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

1 Answer 1

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!