Prindol

DESIGN, HTML5, CSS3, DOM, Jquery, JSON, Actionscript2/3, Linux, IIS

You are not logged in.

#1 2022-03-07 15:02:28

skydown
Administrator
Registered: 2011-07-25
Posts: 330

[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={"이름"}/>

Offline

Board footer

Powered by FluxBB