inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

태그안에 value로 설정하는 것과 그냥 쓰는 것의 차이가 뭔가요

294

김수환
0

const SubmitBtn = styled.button`
  background-color: white;
  color: black;
  font-weight: 600;
  border: 0;
  font-size: 12px;
  padding: 5px 10px;
  text-transform: uppercase;
  border-radius: 5px;
  cursor: pointer;
`;


<SubmitBtn1 type="submit"
           value={isLoading ? "Editing..." : "Done"}
           />




<SubmitBtn2 type="submit">
          {isLoading ? "Editing..." : "Done"}
          </SubmitBtn>

2번 버튼 같이 버튼을 설정해야 다른 버튼과 같이 올바르게 적용되는데,

1번 버튼처럼 value로 넣어버리면 옆에 있는 버튼과 스타일이 똑같은데 갑자기 엄청 작아집니다.

클릭만 겨우 할 수 있는 정도의 크기가 되어버려요

왜 그런건가요?

const TextArea = styled.textarea`
  border: 1px solid white;
  padding: 20px;
  border-radius: 20px;
  font-size: 16px;
  color: white;
  background-color: black;
  width: 100%;
  resize: none;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

  }
  &:focus {
    outline: none;
    border-color: #1d9bf0;
  }
`
const SubmitBtn = styled.button`
  background-color: white;
  color: black;
  font-weight: 600;
  border: 0;
  font-size: 12px;
  padding: 5px 10px;
  text-transform: uppercase;
  border-radius: 5px;
  cursor: pointer;
`;
const AttachFileButton = styled.label`
  background-color: white;
  color: black;
  font-weight: 600;
  border: 0;
  font-size: 12px;
  padding: 5px 10px;
  text-transform: uppercase;
  border-radius: 5px;
  cursor: pointer;
`;
const AttachFileInput = styled.input`
  display: none;
`;
const Form = styled.form`
  gap: 5px;
`;
.
.
.
.
return (
<Form onSubmit={onSubmit}>
    <TextArea
            maxLength={180}
            defaultValue={tweet}
            onChange={onChange}
            id={id}
          />
          <AttachFileButton htmlFor="editFile">
        {editFile ? "Photo Changed✅" : "Change Photo"}
      </AttachFileButton>
      <AttachFileInput
        onChange={onFileChange}
        type="file"
        id="editFile"
        accept="image/*"
      />
        <SubmitBtn type="submit">
          {isLoading ? "Editing..." : "Done"}
          </SubmitBtn>
        </Form>
)

위 코드는 스타일과 태그 내용 전부입니다.

답변 0