[Errorlog] Vaccine-life / 2021.08.18

1. material-ul의 TextareaAutosize CSS문제

• onChange에 이벤트 받고 함수 먹였는데, 작성 후 왜 내용 안날라감? setComment()가 안먹힘.
• 글 작성할때는 changeComment먹히는데...?

=> value={comment} 줘야함. 휴먼에러.

 

• inline style로 할때, focus시 아웃라인 none 어떻게 먹임?

=> style폴더에 textarea css를 따로 만들고 거기엔 아래 코드만 주기. 나머지는 인라인css로 처리하고 어트리뷰트는 그대로 적어주면 됨. 하지만 프로젝트 전체 textarea의 css에 영향을 주기때문에 이 방법도 썩 좋은 편은 아님.

textarea:focus {

  outline: none;

}

=> import { styled } from "@material-ui/core/styles"; 사용

• styled-components는 먹히지 않음.
• mateial-ui의 styled를 import 해와서 styled-components처럼 사용.

// 소괄호 안에 스타일 주고자 하는 material-ui명 넣기
const TextAreaAuto = styled(TextareaAutosize)({
  resize: "none",
  width: "100%",
  padding: "1rem 0.7rem",
  boxSizing: "border-box",
  border: "none",
  fontSize: `${theme.SubHeadTwoSize}`,
  fontFamily: "Noto Sans KR",
  color: `${theme.typoBlack}`,
  // 가상 셀렉터 css방법(인라인으로는 먹히지 않음)
  "&:focus": {
    outline: "none",
  },
  "&:hover": {
    color: "hotpink",
  },
});

---