Prindol

skydown

Administrator

Registered: 2011-07-25

Posts: 335

[REACT] styled-components

# 태그의 변수 값을 속성으로 사용

import styled from "styled-components";
const Tag = styled.div<{name: string}>`
    background: url('/assets/images/name_${props => props.name}.png') center center / cover no-repeat;
`;
...
<Tag name={"이름"}/>

# 태그의 변수 값을 비교하여 속성으로 사용

import styled, {css} from "styled-components";
const Tag = styled.div<{name: string}>`
    position:absolute; right:100px;
    ${props => props.name === '문자' && css`
        right:151px;
    `}
`;
...
<Tag name={"이름"}/>

---

http://cheolho.deviantart.com/