Адаптивное поле ввода компонента

Question

У меня есть входной компонент, который принимает полный размер на основе свойства maxWidth и может уменьшаться при изменении размера экрана.

Проблема в том, что поле не соответствует maxWidth в пикселях, но нормально, если ввод равен 100%. Кроме того, у центрирования ввода есть свои проблемы с заполнением, но я думаю, что это та же проблема.

Как ограничить максимальную ширину ввода относительно отступов и сохранить гибкость для сжатия?

Codesandbox (вы можете раскошелиться и изменить).

import * as React from "react";
import styled from "styled-components";

interface Props extends React.ComponentPropsWithoutRef<"input"> {
  maxWidth?: string;
}

const Input = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
  return <StyledInput ref={ref} {...props} />;
});

const defPadding = 5;

const StyledInput = styled.input<Props>`
  box-sizing: content-box;
  margin: 5px;
  vertical-align: middle;
  padding: ${defPadding}px 0;
  box-shadow: inset 0 0 0 1px blue;
  border-radius: 5px;
  border: none;
  outline: none;
  font: inherit;
  max-width: calc(
    ${({ maxWidth }): string => maxWidth || "100%"} - ${defPadding * 2}px
  );
  width: 100%;
  text-align: center;
`;

export default function App() {
  return (
    <div className="App">
      <div>
        <Input />
        <Input maxWidth="1000px" />
      </div>

      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center"
        }}
      >
        <Input />
        <Input maxWidth="1000px" />
      </div>
    </div>
  );
}

Answer 1

Если я правильно понял вопрос, проблема не в отступах, а в их боковых 5-пиксельных полях.

Вы можете немного обновить стили, чтобы расширить

<Input maxWidth="1000px" /> насколько это возможно, но не более 1000px. Конечный CSS результат должен быть:

width: 1000px;
max-width: calc(100% - 10px);

В ваших стилях компонентов попробуйте:

const StyledInput = styled.input<Props>`
  box-sizing: content-box;
  margin: 5px;
  vertical-align: middle;
  padding: ${defPadding}px 0;
  box-shadow: inset 0 0 0 1px blue;
  border-radius: 5px;
  border: none;
  outline: none;
  font: inherit;
  max-width: calc(100% - ${defPadding * 2}px);
  width: ${({ maxWidth }): string => maxWidth || "auto"};
  text-align: center;
`;

Если это ваша цель, возможно, margin: 5px также должен использовать defPadding переменная.