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>
)
위 코드는 스타일과 태그 내용 전부입니다.