CSS 스타일을 사용하여 ReactJs의 입력 태그를 아름답게 만듭니다.

Question

내 React JS 애플리케이션에는 다음 구성요소가 있습니다:

const 입력 = ({name, ..rest}) =>
  반품 (
      <div>
        <입력 유형="텍스트" 이름={이름} {...나머지}/>
        {오류 <&<span>오류: 이름을 추가하세요</span>}
      </div>
  );
};

rest매개변수에는 필수, className, ID 등과 같은 모든React.InputHTMLAttributes가 포함됩니다.

입력 구성 요소에 style 속성을 추가하는 데 문제가 있습니다. 다음과 같은 내용을 추가하면:

여백-하단: 45px

그러면 입력란과 스팬 사이에 공백이 생기겠지만, 이 공백은 전체 컴포넌트의 간격이 되어야 하므로, 컴포넌트의 요소 사이가 아닌 컴포넌트 아래에 간격을 적용해야 합니다.

이 문제를 방지하고 입력 태그의 ...rest 속성을 보존하려면 어떻게 해야 합니까?

참고: style 외에도 className, id, 를 사용할 수도 있습니다. 컨텍스트;필수 등.

Answer 1

rest中提取出style属性，然后删除其margin属性（之前设置的），并用您自定义的marginBottom: 45에서 재정의할 수 있습니다.

으아악