时间戳

首页 > 解决方案 > 如何将 Height 属性添加到自定义 React 组件

css - 如何将 Height 属性添加到自定义 React 组件

问题描述

嘿，我正在创建一个包含两个文本框的 React 表单。我创建了一个自定义文本框，但我希望它们具有不同的高度，我该如何实现？

表单.js

 <Label>Job Description</Label>
            <Textarea
              type="textarea"
              name="description"
              focus={isFocused}
              value={description}
              onFocus={handleOnFocus}
              onChange={handleTitleChange}
            />
            <Label>Job Requirements</Label>
            <Textarea
              type="textarea"
              name="requirement"
              focus={isFocused}
              value={requirement}
              onFocus={handleOnFocus}
              onChange={handleTitleChange}
            />

样式化组件

const Textarea = styled.textarea`
  width: 100%;
  border: 1px solid #d3d3d3;
  outline: none;
  resize: none;
  transition: 0.1s ease-out;
  height: 80px;
  background-color:white;

`;

现在我已将高度指定为 80px，但我希望Job requirement文本框为 40px

标签： cssreactjsstyled-components

解决方案

可以通过 props 配置

<Textarea type="textarea" name="description" height="40px" />
<label>Job Requirements</label>
<Textarea type="textarea" name="requirement" height="80px" />

接着

const Textarea = styled.textarea`
 width: 100%;   
 border: 1px solid #d3d3d3;
 outline: none;  
 resize: none; 
 transition: 0.1s ease-out; 
 height: ${(props) => props.height};  
 background-color: white; `;

检查我的 沙箱

推荐阅读