javascript - 样式化组件如何将宽度道具传递给组件

Question

我是样式组件的新手。我想通过将道具传递给组件来设置输入宽度。预期输出应该是：

<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

Answer 1

在这个小片段:${props => props.width ? width : 'auto'}中，您忘记了width在props-object 上。要解决这个问题：

${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>