样式组件如何将宽度属性传递给组件

Question

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

<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'}

您可以在下面看到我的工作示例：

${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'));