score:1

Accepted answer

signature from the styled api documentation:
styled(component, [options])(styles) => component

the props are passed into the styles parameter (from where you're also destructuring and retrieving theme), so you can add your open property to that and use it directly -- for example:

// 1. added `open` to `styles` param
const searchdiv = styled("div")(({ theme, open }) => ({

  ...

  // 2. changed `props.open` to `open` below 
  [theme.breakpoints.down("sm")]: {
    display: open ? "flex" : "none",
  },
}));

// unchanged
<searchdiv open={open}>
  ...
</searchdiv>

simple working example to demonstrate usage: https://codesandbox.io/s/simple-mui5-props-example-1uclg?file=/src/demo.js


Related Query

More Query from same tag