diff --git a/components/Profile/InputTags/index.jsx b/components/Profile/InputTags/index.jsx index cb2b247b..6d0b091f 100644 --- a/components/Profile/InputTags/index.jsx +++ b/components/Profile/InputTags/index.jsx @@ -13,6 +13,7 @@ const Tag = ({ label, onCancel }) => { borderRadius: '4px', padding: '4px 8px', mr: '8px', + mb: '8px', }} > { ); }; -const StyledTagsField = styled(TextField)` +const StyledTagsWrapper = styled(Box)` + width: 100%; + border: 1px solid #dbdbdb; + border-radius: 4px; + align-items: center; + padding: 8px 16px; + min-height: 50px; + div { + &::before { + border-color: transparent; + } + } input { - padding-left: ${({ hasData }) => (hasData ? '0' : '16px')}; + padding: 0; } `; @@ -51,33 +63,38 @@ function InputTags({ value = [], change }) { } } }; + return ( - 0} - fullWidth="true" - placeholder="搜尋或新增標籤" - onKeyDown={keyDownHandle} - className="input-tags" - InputProps={ - value.length && { - startAdornment: ( - - {Array.isArray(value) && - value.map( - (item) => - typeof item === 'string' && ( - change(item)} - /> - ), - )} - - ), - } - } - /> + + + {Array.isArray(value) && + value.map( + (item) => + typeof item === 'string' && ( + change(item)} /> + ), + )} + + + ); }