score:4
in this little snippet: ${props => props.width ? width : 'auto'}, you forget that width is on the props-object. to fix it:
${props => props.width ? props.width : 'auto'}
you can see my working example below:
const uiinput = styled.input`
padding: 5px;
width: ${props => props.width ? props.width : 'auto'}
`
reactdom.render(
<div>
<div>
<p>300px</p>
<uiinput width="300px" />
</div>
<div>
<p>80%</p>
<uiinput width="80%"/>
</div>
</div>,
document.getelementbyid('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>
<div id="root"></div>
Source: stackoverflow.com
Related Query
- styled component how to pass width props to component
- How to pass props to a styled component in emotion? Using TypeScript
- How to pass props of React component to styled component
- How to pass props to styled component when using theme?
- How to pass styles via props with styled components without having to create the component inside the component
- How to pass redux props to styled component in react typescript
- How to pass props to styled component inside a loop
- How can i pass the props to change the width of react-select component
- React - How to pass props to a component passed as prop
- How to pass props without value to component
- How to extend styled component without passing props to underlying DOM element?
- How to pass props to Screen component with a tab navigator?
- How to pass props to component inside a React Navigation navigator?
- How to pass function as props from functional parent component to child
- How to pass style props for a specific component in react-native
- How do I pass props a component rendered with Enzyme.js?
- How to pass custom attribute to a styled component in a functional component?
- How to pass props to react component that wrapped in variable
- React: How to pass width as a prop from the component
- how to change image src using props with styled component and react
- How to pass rest of props to react component while also having required props defined in an interface
- How to pass props to a component passed as props in React?
- TypeScript: How to define the type when pass component in props in React?
- How to pass function as props from one functional component to another?
- React. How to pass props inside a component defined on a prop?
- Typescript how to pass props in parent component
- How to pass props (both states and functions) to the child router component
- How To Pass Props To Function Component use react-router-dom v6
- How to pass props of one child component to another child component using parent component
- How to fetch data asynchronously inside component and pass it as props to another component in render?
More Query from same tag
- How can I safely use setTimout in combination with refs inside useEffect?
- How to create dynamic route in gatsby
- Cannot read property 'id' of undefined when creating a todo in NewTodo.jsx
- How to mock eventListener when set in componentDidMount()
- Use Microsoft Graph Toolkit with msal-browser
- CSS Grid auto populate selected columns
- How would I reconfigure a super complicated ternary statement?
- Getting an error message while trying to execute Router Component in ReactJS using Jest and Enzyme
- React router modal-only routes
- How to contain images in react material ui CardMedia component
- Sort array of documents by date string - ReactJS
- Why after refresh the data will into the array in reactjs
- How does firebase rule set protects database?
- React - use state on an empty array
- React review form not submitting review on submit
- How to change the nav bar color when it reaches the next div
- Formik - chrome autofill on password input issue
- Console log before setState prints post update
- Proxy backend through frontend using istio or nginx
- I want to reset my form after clicking submit in reactjs. I have tried making another method. but it does not work
- Reduce gap between bars in svg graphs
- How to wait for javascript promise to return value before continuing execution?
- Exclude page to be wrapped in gatsby wrapPageElement
- Call Method that inside Another Component - React Js
- import @react-pdf-viewer/core in meteor js 2.2 cause a problem
- ReactJS Material UI sticky footer not working
- Adding a checkbox in React when input is declared void
- Uncaught Error: MUI: makeStyles is no longer exported from
- Know React Component expected props from another Component
- How to filter out duplicate names with returned JSON data
