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
Source: stackoverflow.com
Related Query
- How can I pass both the theme and the props in the styled() of Material UI-5?
- How can a Styled Components Theme be passed as Props to a Material UI component?
- How can I use both props and posts at the same time?
- How to use custom props and theme with material-ui styled components API (Typescript)?
- How can I pass CSS classes to React children and ensure they will override the child’s local class?
- How to use setFieldValue and pass the value as props between components
- How can I check the type of material ui theme in react js? (light or dark)
- How to pass props (both states and functions) to the child router component
- How can I not pass children as props. Instead, nest children between the opening and closing tags on React?
- How to pass a function as props when both Parent and Child component also a functional component?
- Can I safely use both the "to" and "onClick" props on a React Router Link?
- How to pass styles via props with styled components without having to create the component inside the component
- How can I pass a locally created function and variable as props in a component?
- How to make the pass a dynamic value to css class and cusmize in material UI in react
- How can I pass custom props to SwiperSlide and get it onSlideChange function?
- How can I redirect to another component in react and pass the state that I set in the previous component?
- In Material UI how can I dynamically pass down the color to my style?
- How to pass a specific prop when the props can have multiple types in React, Typescript?
- How can I pass default theme that is provided by MUI5 and create a style for any component in MUI5?
- How to pass props and function to the react-widow list?
- How can I pass a value from the backend to a React frontend and use that value in the CSS for the frontend?
- How can I simplify the code to pass props to child components?
- How to make an element correctly reset its state and pass props while focusing on the input
- Async props pass in React: How to pass a key to update redux store in react? [First from the higher component and then from redux store]
- How to get the props with onClick and pass with component in redux?
- How to pass both props and a component as parameters of a functional component
- How can I use a button to change the Theme for material UI on my site? this is where I am so far
- How can I pass the state from one component to another and how can I modify the state?
- How can I pass props from one component to another using Link and router in react
- How can you pass props and use HOC with React context
More Query from same tag
- Retrieve select value with redux-form
- Why does centring my div stop it taking it taking up the max amount of width available?
- Using Promises properly in javascript
- React route exact not work if I have child route in React router v5
- How to change default error message in Yup
- Appointment System with Google Calendar API (Timeslots) React/NodeJS
- How to change state of another object in React
- How to add objects within another array of object at alternate position?
- Render function only once in React
- Using React's immutable helper with Immutable.js
- Why isn't createStructuredSelector sending props to the component?
- calling useFetch hook inside useEffect
- Module not found: Can't resolve '../styles/global.css' in an next.js project
- React Js Time Selector
- unable to parse API value
- Class constructor cannot be invoked without 'new' when returning <Component />
- How can use material UI Pickers KeyboardDatePicker with DD/MMM/YYYY format or with a custom input field
- create react app - npm run build issues
- ReactJS Photo Gallery using an array of urls from Express database?
- Remove a React component from the DOM
- filtering data after fetch for graph
- Extracting configuration from React components
- React waiting for map function before deciding render to prevent div flash
- React collect all properties as one props and put it into component or NOT?
- Typescript error: Type '{ onClick: () => void; }' is not assignable to type 'IntrinsicAttributes'
- How do I move data from from an api to statehook?
- Three levels path in react js router
- ReactJS + Redux: How to structure action creators down to each component?
- How to test a promise returned by an external module using axios.create in Jest?
- Reset to Initial State with React Hooks