코멘트 작성 부분에서 스타일 추가시 짹짹 버튼이 작동이 안되는 문제..

Question

import { Button , Form , Input } from 'antd' ; import React , { useCallback , useState } from 'react' ; import PropTypes from 'prop-types' ; const CommentForm = ({ post }) => { const [ commentText , setCommentText ] = useState ( '' ); const onSubmitComment = useCallback (() => { console . log ( commentText ); }, [ commentText ]); const onChangeCommentText = useCallback (( e ) => { setCommentText ( e . target . value ); }, []); return ( < Form onFinish = { onSubmitComment } > < Form.Item style = { { position : 'relative' , margin : 0 } } > < Input.TextArea rows = { 4 } value = { commentText } onChange = { onChangeCommentText } /> < Button style = { { position : 'absolute' , right : 0 , bottom : - 40 } } type = "primary" htmlType = "submit" > 삐약 ); }; CommentForm . propTypes = { post : PropTypes . object . isRequired , }; export default CommentForm ; < Button style = { { position : 'absolute' , right : 0 , bottom : - 40 } } type = "primary" htmlType = "submit" > 삐약 style = { { position : 'absolute' , right : 0 , bottom : - 40 } } CommentForm.js -> Button 태그 안에 마지막에 추가하신 스타일 부분이 들어가면 짹짹 버튼이 동작을 안하는 것을 확인했는데. 이 부분이 왜 그런것인지 문의 드립니다. p.s : styled-component 로 적용을 해보아도 동일하게 버튼이 먹통이 됩니다..

castinglife · Answer

import styled from 'styled-components' ; const ButtonWrapper = styled ( Button ) ` position: absolute; right: 0px; bottom: -40px; z-index: 1; ` ; return ( < Form onFinish = { onSubmitComment } > < Form.Item style = { { position : 'relative' , margin : 0 } } > < Input.TextArea value = { commentText } onChange = { onChangeCommentText } rows = { 4 } /> < ButtonWrapper type = "primary" htmlType = "submit" > 삐약 ); 또는 return ( < Form onFinish = { onSubmitComment } > < Form.Item style = { { position : 'relative' , margin : 0 } } > < Input.TextArea value = { commentText } onChange = { onChangeCommentText } rows = { 4 } /> < Button style = { { position : 'absolute' , right : 0 , bottom : - 40 , zIndex : 1 } } type = "primary" htmlType = "submit" > 삐약 { /* style={{ position: 'absolute', right: 0, bottom: -40 }} */ } ); z-index: 1; 값을 주니 정상 작동하네요..^^