스타일드-components로 조건부 렌더링
2418 단어 CSSJavaScriptTypeScripttech
업무상 css는 모두
styled-components
로 작성됩니다.기본적으로 위의 보도를 많이 참고하여 쓴다.
갑작스레 특정 조건하에서만 스타일, 조건 이외의 경우
아무것도 스타일링하고 싶지 않아...내 생각엔
물론 삼원 연산자를 사용한다면
조건 이외의 상황에서 스타일의 기본값을 지정하면 됩니다.
스타일의 기본값을 하나하나 쓰기 때문에 시간의 낭비감이...
응, react의 조건부 렌더링 같은 거
styled-components
못해?그렇게 생각하면 돼.
다음은 구체적인 코드다.
import styled, { css } from "styled-components";
const StyledDiv = styled.div<{ flag: boolean }>`
${({ flag }) =>
flag &&
css`
color: #ffffff;
`}
`;
이런 느낌으로 세 가지 연산자를 회피하는 느낌으로 썼다.또한
css
사용하지 않아도 스타일링이 가능합니다.다만, 사용
css
하면 스타일의 속성, 지식감효과가 있으니까
css
끼는 게 편하겠죠?내 생각엔
Reference
이 문제에 관하여(스타일드-components로 조건부 렌더링), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/kupuma_ru21/articles/66fd3499c7f3ef텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)