стилизованный компонент, как передать ширину реквизита компоненту - PullRequest
Новая
       27

стилизованный компонент, как передать ширину реквизита компоненту

0 голосов
/ 06 мая 2019

Я новичок в стильных компонентах. Я хочу установить ширину ввода, передавая реквизиты для компонента. Ожидаемый результат должен быть: 

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

Вот мой компонент: 

import styled from "styled-components"

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

export default UIInput

1 Ответ

1 голос
/ 06 мая 2019

В этом небольшом фрагменте: ${props => props.width ? width : 'auto'} вы забыли, что width находится на props -объекте. Чтобы это исправить: 

${props => props.width ? props.width : 'auto'}

Вы можете увидеть мой рабочий пример ниже: 

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>
...