在 React 中使用样式化组件重叠左侧部分输入

Posted 2023-03-15

【中文标题】在 React 中使用样式化组件重叠左侧部分输入

【英文标题】：Overlap Left Part Input using Styled Components in React

【发布时间】：2021-10-26 09:28:12

【问题描述】：

我需要在 React 中使用 styled-components 重叠 Input 的左侧部分。只有在重叠之后，他才能在右侧写字。

代码沙盒在这里CLICK HERE

如下图：

const TextInput = styled.input`
  font-size: 16px;
  padding: 10px 10px 10px 10px;
  display: block;
  border: 2px solid #e3e5e5;
  border-radius: 8px;
  height: 28px;
  width: 100%;
  &:focus 
    outline: none;
  
`;

【问题讨论】：

请详细说明要做什么以及您面临的问题。重叠不理解

@Hitech Hitesh。你是怎么做到的，像上图，左边，testing name

【参考方案1】：

我会将边框样式和布局推送到Wrapper 组件。添加样式标签组件。

代码

const Wrapper = styled.div`
  width: 100%;
  position: relative;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: row;
  border: 2px solid #e3e5e5;
  border-radius: 8px;
  overflow: hidden;
`;

const InputLabel = styled.label`
  background-color: #e3e5e5;
  color: gray;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  height: 28px;
  justify-content: center;
  padding: 10px;
  width: auto; // <-- can set to specific width for consistency
`;

const TextInput = styled.input`
  border-width: 0;
  flex: 1;
  font-size: 16px;
  height: 28px;
  padding: 10px;
  outline: none;
`;

const TextError = styled.span`
  display: block;
  font-size: 12px;
  color: #ff0000;
  line-height: 14px;
  font-weight: bold;
  margin-top: 11px;
`;

const Input = (
  label,
  name,
  type = "text",
  value = "",
  handleChange = () => ,
  error = null,
  touched = false
) => 
  return (
    <div>
      <Wrapper>
        <InputLabel htmlFor=name>label</InputLabel>
        <TextInput
          id=name
          name=name
          type=type
          value=value
          onChange=handleChange
        />
      </Wrapper>
      error && touched && <TextError>error</TextError>
    </div>
  );
;

【讨论】：

嗨，德鲁。你能把输入的宽度设为 100% 吗？灰色区域周围还有一点空白。也可以填吗？谢谢

@Joseph 输入应该已经响应并从Wrapper 组件中获取 100% 的宽度，据我所知，输入周围的空格来自 body 中的元素代码沙盒，输入组件中没有任何内容。我为 body 标签添加了 CSS 规则。

【参考方案2】：

我尝试以与上图相同的方式重新创建。对于解决方案，我在 Wrapper 中添加了额外的类。这种方法能解决你的问题吗？ example

const Overlap = styled.span`
  width: min-content;
  display: flex;
  align-items: center;
  padding: 0px 60px 0 20px;
  border-radius: 8px 0 0 8px;
  background-color: hsl(0, 0%, 90%);
  color: hsl(195, 2%, 68%);
  font-size: 1.2em;
  white-space: nowrap;
`;

【讨论】：

谢谢，您能否添加边框半径并在文本输入上添加一些填充。确保他只能在白色部分打字。现在，文本输入隐藏在左侧的某个部分