I'm new in styled ponents . I want to set input width by passing props to ponent. Expected output should be :

<Input width=30px> or <Input width=100%> 

Here is my ponent:

import styled from "styled-ponents"

const UIInput = styled.input`
  padding: 5px;
  width: ${props => props.width ? width : 'auto'}
`

export default UIInput

I'm new in styled ponents . I want to set input width by passing props to ponent. Expected output should be :

<Input width=30px> or <Input width=100%> 

Here is my ponent:

import styled from "styled-ponents"

const UIInput = styled.input`
  padding: 5px;
  width: ${props => props.width ? width : 'auto'}
`

export default UIInput

• javascript
• reactjs
• styled-ponents
• css-in-js

Share Improve this question Follow asked May 6, 2019 at 9:18 Yerlan YeszhanovYerlan Yeszhanov 2,4491313 gold badges4242 silver badges7878 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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./ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg./styled-ponents/dist/styled-ponents.min.js"></script>

<div id="root"></div>