React) 리액트 css와 styled-components 가상선택자 적용

리액트에서의 css

보통 리액트는 프레임워크가 아니라고 한다
리액트는 라이브러리이기 때문에 어떤 곳에서도 사용될 수 있다

css도 마찬가지다
프레임워크라면 정해진 룰을 지켜서 작성해야만 동작하겠지만
라이브러리이기 때문에 어떤 종류의 css style도 적용할 수 있다
-> 해보고 안되면 다른 방식으로 넣으면 됨..

styled-components 가상 선택자 적용

1. SCSS식 표현을 사용할 수 있다

const Div = styled.div` 
    width:300px; 
    height:300px;
    &:hover {
        background-color : skyblue;
    }
`

2. 다른 컴포넌트와 연결 가능

const Div2 = styled(Div)`  // Div 컴포넌트 상속

  ${Div}:hover & {  // Div 컴포넌트 hover 시 배경 색 변경
    background-color: skyblue;
  }
`

 

::selection - 텍스트 선택 시 적용되는 글 배경 색의 선택자

:read-only - 컴포넌트에 readOnly 속성 적용 되었을 경우 선택자

 

 

리액트에서 placeholder의 색상을 변환하는 방법을 찾아봐야함..

const TextInput = styled.TextInput.attrs({
  placeholderTextColor: "grey",
})`
  background-color: white;
  border-radius: 15px;
  padding: 5px 10px;
  font-size: 18px;
`;

이 방법으론 실패했다

출처 : https://intrepidgeeks.com/tutorial/use-placeholder-cond-colors-when-placing-in-styles